版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
目錄Web存儲概述WebStorage存儲方式實例8-3：打開、創(chuàng)建數(shù)據(jù)庫WebDB存儲方式實例8-1：統(tǒng)計訪問頁面的次數(shù)實例8-2：網頁計數(shù)器實例8-4：調用并執(zhí)行SQL語句實例8-5：在網頁中獲取并顯示數(shù)據(jù)綜合實例：保存并讀取登錄用戶名和密碼1Web存儲概述全新的HTML5標記語言Web存儲機制應用中，我們可以將數(shù)據(jù)存放在客戶端，而無需使用專業(yè)的數(shù)據(jù)庫工具，主要在以下三個方面作了加強：對于Web開發(fā)者來說，提供了容易使用的API接口，通過設置鍵值對即可使用。在存儲的容量方面，根據(jù)用戶分配的磁盤配額進行存儲，可以在每個用戶域下存儲不少于5～10MB的內容。這就意味者，用戶可以不僅僅存儲Session了，還可以在客戶端存儲用戶的設置偏好、本地化的數(shù)據(jù)、離線的數(shù)據(jù)，這對提高訪問效率很有幫助。提供了使用JavaScript編程的接口，這樣開發(fā)者可以使用JavaScript在客戶端完成很多以前要在服務端才能完成的工作。2W
e
b
S
t
o
r
a
g
e
存儲方式WebStorage是HTML5引入的一個非常重要的功能，在前端開發(fā)中經常用到，可以在客戶端本地存儲數(shù)據(jù)，類似cookie，但實現(xiàn)功能要比cookie強大的多，cookie大小被限制在4KB，WebStorage官方建議為每個網站5MB。WebStorage又分為兩種：sessionStoragelocalStorage從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關閉也就沒了；而localStorage則一直將數(shù)據(jù)保存在客戶端本地，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的；不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個方法（以localStorage為例）：保存數(shù)據(jù)localStorage.setItem(key,value);2W
e
b
S
t
o
r
a
g
e
存儲方式讀取數(shù)據(jù)localStorage.getItem(key);刪除單個數(shù)據(jù)localStorage.removeItem(key);刪除所有數(shù)據(jù)localStorage.clear();得到某個索引的keylocalStorage.key(index);2W
e
b
S
t
o
r
a
g
e
存儲方式在下面的代碼中，演示了創(chuàng)建并訪問一個sessionStorage的過程。<!DOCTYPEHTML><html><body><scripttype="text/JavaScript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script></body></html>3We
b
DB存儲方式在HTML5中推出了WebSQL數(shù)據(jù)庫（WebSQLDataBase簡稱為WebDB）存儲方式，它內置了SQLite數(shù)據(jù)庫，對數(shù)據(jù)庫的操作可以通過調用executeSql()方法實現(xiàn)，允許使用JavaScript代碼控制數(shù)據(jù)庫的操作。在HTML5標記語言中，WebDB可以實現(xiàn)數(shù)據(jù)的本地存儲，它提供了關系數(shù)據(jù)庫的基本功能，可以存儲頁面中交互的、復雜的數(shù)據(jù)。WebDB既可以保存數(shù)據(jù)，也可以緩存從服務器獲取的數(shù)據(jù)。WebDB通過事務驅動實現(xiàn)對數(shù)據(jù)的管理，因此可以支持多瀏覽器的并發(fā)操作，而不發(fā)生存儲時的沖突。如果要通過WebDB進行本地數(shù)據(jù)的存儲，首先需要打開或創(chuàng)建一個數(shù)據(jù)庫，打開或創(chuàng)建數(shù)據(jù)庫的API是openDatabase，其調用代碼如下所示。openDatabase(DBName,DBVersion,DBDescribe,DBSize,Callback());3We
b
DB存儲方式參數(shù)DBName：表示數(shù)據(jù)庫名稱。參數(shù)DBVersion：表示版本號。參數(shù)DBDescribe：表示對數(shù)據(jù)庫的描述。參數(shù)DBSize：表示數(shù)據(jù)庫的大小，單位為字節(jié)，如果是2MB，必須寫成2*1024*1024。參數(shù)Callback()：表示創(chuàng)建或打開數(shù)據(jù)庫成功后執(zhí)行的一個回調函數(shù)。當調用openDatabase方法時，如果指定的數(shù)據(jù)庫名存在，則打開該數(shù)據(jù)庫。如果指定的數(shù)據(jù)庫名不存在，則新創(chuàng)建一個指定名稱的空數(shù)據(jù)庫。4實例8-1
統(tǒng)計訪問頁面的次數(shù)本實例的功能是統(tǒng)計訪問頁面的次數(shù)，每當刷新一次頁面，訪問次數(shù)就會增加1次。本例使用localStorage方式存儲數(shù)據(jù)，當關閉瀏覽器重新打開時，訪問次數(shù)將在關閉前的數(shù)量上加1。實例文件8-1.html的主要代碼如下：<!DOCTYPEHTML><html><body><scripttype="text/JavaScript">if(localStorage.pagecount)
{localStorage.pagecount=Number(localStorage.pagecount)+1;
}else
{localStorage.pagecount=1;
}4實例8-1
統(tǒng)計訪問頁面的次數(shù)document.write("Visits:"+localStorage.pagecount+"time(s).");</script><p>刷新頁面會看到計數(shù)器在增長。</p><p>請關閉瀏覽器窗口，然后再試一次，計數(shù)器會繼續(xù)計數(shù)。</p></body></html>執(zhí)行效果如下圖所示。
執(zhí)行效果5實例8-2
網頁計數(shù)器
本實例的功能是統(tǒng)計訪問當前頁面的次數(shù)，每當刷新一次頁面，訪問次數(shù)就會增加1次。本例使用sessionStorage方式存儲數(shù)據(jù)，當關閉瀏覽器重新打開時，訪問次數(shù)將重新計數(shù)。實例文件8-2.html的主要代碼如下：<!DOCTYPEHTML><html><body><scripttype="text/JavaScript">if(sessionStorage.pagecount)
{sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}else
{sessionStorage.pagecount=1;
}5實例8-2
網頁計數(shù)器
document.write("Visits"+sessionStorage.pagecount+"time(s)thissession.");</script><p>刷新頁面會看到計數(shù)器在增長。</p><p>請關閉瀏覽器窗口，然后再試一次，計數(shù)器已經重置了。</p></body></html>執(zhí)行效果如下圖所示。
執(zhí)行效果6實例8-3
打開
、
創(chuàng)建數(shù)據(jù)庫
實例文件8-3.html的具體實現(xiàn)代碼如下所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>打開/創(chuàng)建數(shù)據(jù)庫</title><linkhref="Css/css8.css"rel="stylesheet"type="text/css"><scripttype="text/JavaScript"language="jscript"src="Js/js3.js"/></script></head><body>6實例8-3
打開
、
創(chuàng)建數(shù)據(jù)庫
<inputid="btnCreateDb"type="button"value="創(chuàng)建新的數(shù)據(jù)庫"class="inputbtn"onClick="btnCreateDb_Click();">
<inputid="btnTestConn"type="button"value="查看連接狀況"class="inputbtn"onClick="btnTestConn_Click();">
<pid="pStatus"></p></body></html>6實例8-3
打開
、
創(chuàng)建數(shù)據(jù)庫
編寫腳本文件js3.js，具體實現(xiàn)流程如下所示。（1）首先定義了一個全局性變量“db”來保存打開的數(shù)據(jù)庫對象。（2）當用戶單擊“創(chuàng)建數(shù)據(jù)庫”按鈕時，調用自定義函數(shù)btnCreateDb_Click()，通過此函數(shù)“創(chuàng)建/打開”一個名為“Student”的數(shù)據(jù)庫對象，此數(shù)據(jù)對象的版本號為“1.0”，大小為2MB。如果創(chuàng)建成功則執(zhí)行回調函數(shù)，并在回調函數(shù)中顯示執(zhí)行成功的提示信息。（3）當單擊“測試連接”按鈕時，調用另外一個自定義的函數(shù)btnTestConn_Click()，通過此函數(shù)根據(jù)全局變量“db”的狀態(tài)，顯示與數(shù)據(jù)庫的連接是否正常的提示信息。6實例8-3
打開
、
創(chuàng)建數(shù)據(jù)庫
文件js3.js的具體實現(xiàn)代碼如下：//JavaScriptDocumentfunction$$(id){returndocument.getElementById(id);}vardb;//單擊“創(chuàng)建數(shù)據(jù)庫”按鈕時調用functionbtnCreateDb_Click(){db=openDatabase('Student3','1.0','StuManage',2*1024*1024,function(){$$("pStatus").style.display="block";$$("pStatus").innerHTML="數(shù)據(jù)庫創(chuàng)建成功!";});}6實例8-3
打開
、
創(chuàng)建數(shù)據(jù)庫
//點擊“測試連接”按鈕時調用functionbtnTestConn_Click(){if(db){$$("pStatus").style.display="block";$$("pStatus").innerHTML="數(shù)據(jù)庫連接成功!";}}7實例8-4
調用并執(zhí)行S
QL語句
具體實現(xiàn)流程如下：（1）在頁面中創(chuàng)建一個用于輸入學生資料信息的頁面，用戶可以在頁面中輸入姓名、性別、總分。（2）單擊“提交”按鈕后，將提交的數(shù)據(jù)信息通過調用executeSql()方法插入到表StuInfo中，并將執(zhí)行結果返回顯示在頁面中。實例文件8-4.html的具體代碼如下所示：<scripttype="text/JavaScript"language="jscript"src="js4.js"/></script></head><bodyonLoad="Init_Data();"><pid="pStatus"></p><fieldset>7實例8-4
調用并執(zhí)行S
QL語句
<legend>添加新生資料</legend><spanclass="spanl">
學號：<inputtype="text"readonlyid="txtStuID"class="inputtxt"size="10"><br>
姓名：<inputtype="text"id="txtName"class="inputtxt"size="15"></span><spanclass="spanr">
性別：<selectid="selSex">
<optionvalue="男">男</option>
<optionvalue="女">女</option>
</select><br>
總分：<inputtype="text"id="txtScore"class="inputtxt"size="8">7實例8-4
調用并執(zhí)行S
QL語句
</span><pclass="btn"><inputid="btnAdd"type="button"value="提交"class="inputbtn"onClick="btnAdd_Click();"></p></fieldset></body>7實例8-4
調用并執(zhí)行S
QL語句
腳本文件中程序的具體實現(xiàn)流程如下：（1）在事務處理過程中調用executeSql()方法執(zhí)行編寫好的SQL語句。（2）在執(zhí)行時獲取在頁面中輸入的各項信息值作為實參，傳遞給SQL語句中的形參，從而將頁面中輸入的數(shù)據(jù)插入到表“StuInfo”中。腳本文件js4.js的具體代碼如下所示。function$$(id){returndocument.getElementById(id);}vardb;//單擊“提交”按鈕時調用7實例8-4
調用并執(zhí)行S
QL語句
functionbtnAdd_Click(){ //創(chuàng)建/打開數(shù)據(jù)庫db=openDatabase('Student','1.0','StuManage',2*1024*1024);if(db){varstrSQL="insertintoStuInfovalues";strSQL+="(?,?,?,?)";db.transaction(function(tx){tx.executeSql(strSQL,[ $$("txtStuID").value,$$("txtName").value, $$("selSex").value,$$("txtScore").value
],function(){ $$("txtName").value=""; $$("txtScore").value=""; Status_Handle("成功增加1條記錄!")
},7實例8-4
調用并執(zhí)行S
QL語句
function(tx,ex){
Status_Handle(ex.message)
})})}}//自定義顯示執(zhí)行過程中狀態(tài)的函數(shù)functionStatus_Handle(message){$$("pStatus").style.display="block";$$("pStatus").innerHTML=message;}7實例8-4
調用并執(zhí)行S
QL語句
//生成指定長度的隨機數(shù)functionRetRndNum(n){varstrRnd="";for(varintI=0;intI<n;intI++){strRnd+=Math.floor(Math.random()*10);}
returnstrRnd;}//初始化數(shù)據(jù)functionInit_Data(){$$("txtStuID").value=RetRndNum(6);}7實例8-4
調用并執(zhí)行S
QL語句
在上述中，加載頁面時先調用一個自定義的函數(shù)Init_Data()。該函數(shù)可以隨機生成一個6位數(shù)的字符，并將該值賦于頁面中的“學號”文本框。為了使該學號不能修改，特意將此文本框的屬性設置為“只讀”。當完成輸入學生信息的其他資料，單擊“提交”按鈕調用自定義的函數(shù)btnAddC1ick()，此函數(shù)先打開數(shù)據(jù)庫。當成功執(zhí)行SQL語句后，會清空頁面中原有的內容值，并顯示“成功增加1條記錄!”的提示。如果SQL語句執(zhí)行出錯，將在頁面中顯示錯誤對象ex返回的信息提示。同樣，此程序也需要在SQLite環(huán)境中進行測試，在PC瀏覽器中的頁面效果如下圖所示。執(zhí)行效果8實例8-5
在網頁中獲取并顯示數(shù)據(jù)
在HTML5開發(fā)應用中，為了查看localStorage對象保存的全部數(shù)據(jù)信息，通常要遍歷這些數(shù)據(jù)。在遍歷過程中，需要訪問IocalStorage對象中如下所示的兩個屬性：length：表示localStorage對象中保存數(shù)據(jù)的總量；key：表示保存數(shù)據(jù)時的鍵名項。該屬性常與索引號（index）配合使用，表示第幾條鍵名對應的數(shù)據(jù)記錄。其中，索引號（index）以0值開始。假設取第3條鍵名對應的數(shù)據(jù)，則index值應該為2。在接下來的內容中，將通過一個演示實例來講解通過遍歷的方式在網頁中獲取并顯示數(shù)據(jù)的方法。具體實現(xiàn)流程如下：（1）在網頁中設置一個文本框。（2）當在文本框中輸入內容并單擊“發(fā)表”按鈕后，可以通過localStorage對象保存輸入的數(shù)據(jù)，并在頁面中實時顯示這些數(shù)據(jù)。8實例8-5
在網頁中獲取并顯示數(shù)據(jù)
實例文件8-5.html的具體實現(xiàn)代碼如下所示。<linkhref="css.css"rel="stylesheet"type="text/css"><scripttype="text/JavaScript"language="jscript"src="js5.js"/></script></head><bodyonLoad="getlocalData();"><ulid="ulMessage">
正在讀取數(shù)據(jù)中，請稍等片刻...</ul><pclass="p4"><textareaid="txtContent"class="inputtxt"cols="37"rows="5"></textarea><br><inputid="btnAdd"type="button"value="發(fā)表"class="inputbtn"onClick="btnAdd_Click();"></p></body>8實例8-5
在網頁中獲取并顯示數(shù)據(jù)
腳本文件中程序的具體實現(xiàn)流程如下：（1）設置在加載頁面時會調用自定義的函數(shù)getlocalData()，此函數(shù)具體實現(xiàn)流程為：根據(jù)localStorage對象的length值，使用for語句遍歷localStorage對象保存的全部數(shù)據(jù)。在遍歷過程中，通過strKey變量保存每次遍歷的鍵名。在獲取鍵名后，為了只獲取localStorage對象中保存的點評數(shù)據(jù)，檢測鍵名前3個字符是否為cnt，如果是，則通過getItem()方法獲取鍵名對應的鍵值，并保存在strVal變量中。因為鍵值是由“，”組成的字符串，所以先通過數(shù)組strArr保存分割后的各項數(shù)值，然后通過數(shù)組下標將各項獲取的內容顯示在頁面中。8實例8-5
在網頁中獲取并顯示數(shù)據(jù)
（2）如果在頁面中輸入點評內容，單擊“發(fā)表”按鈕后會調用自定義的函數(shù)btnAdd_Click()，此函數(shù)的實現(xiàn)流程為：先獲取點評內容，然后將內容存儲在strContent變量中。為了使保存內容的鍵名不重復，并且具有標記性，在生成鍵名時調用函數(shù)RetRndNum()，隨機生成一個4位數(shù)字，并與字符cnt組合成新的字符串，保存在strKey變量中。為了保存更多的數(shù)據(jù)信息，保存點評內容的strContent變量通過“，”與時間數(shù)據(jù)組合成新的字符串，保存在strVal變量中。最后，通過setItem()方法將strKey變量與strVal變量分別作為鍵名與鍵值保存在localStorage對象中。8實例8-5
在網頁中獲取并顯示數(shù)據(jù)
腳本文件js5.js的具體代碼如下所示。//JavaScriptDocumentfunction$$(id){returndocument.getElementById(id);}functionbtnAdd_Click(){ //點擊"發(fā)表"按鈕時調用varstrContent=$$("txtContent").value; //獲取文本框中的內容 varstrTime=newDate(); //定義一個日期型對象 if(strContent.length>0){ //如果不為空，則保存varstrKey="cnt"+RetRndNum(4);varstrVal=strContent+","+strTime.toLocaleTimeString();localStorage.setItem(strKey,strVal);}8實例8-5
在網頁中獲取并顯示數(shù)據(jù)
getlocalData(); //重新加載$$("txtContent").value=""; //清空原先內容}functiongetlocalData(){ //獲取保存數(shù)據(jù)并顯示在頁面中varstrHTML="<liclass='li_h'>"; //標題部分strHTML+="<spanclass='spn_a'>編號</span>";strHTML+="<spanclass='spn_b'>內容</span>
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 鐵路道口減速帶安裝合同
- 建筑工程效果圖設計單位勞動合同
- 環(huán)保材料幼兒園施工合同
- 教師團隊招聘合同樣本
- 制藥企業(yè)合同工管理指導
- 橋梁擴建土石方開挖施工合同
- 港口建設施工合同模板
- 建筑智能化弱電工程合同模板
- 熱帶雨林草坪工程合同
- 電梯安裝維護合同封面
- 2024年藥膳大賽理論知識考試題庫400題（含答案）
- 世界美術史 1學習通超星期末考試答案章節(jié)答案2024年
- 市政給水管道施工組織設計方案
- 以往馬克思主義中國化進程與青年學生使命擔當（2022年春）學習通超星期末考試答案章節(jié)答案2024年
- 《心理健康教育主題班會》主題
- 基層預防接種工作全員培訓考試題庫及答案
- 《義務教育語文課程標準》2022年修訂版原版
- 預算績效評價管理機構入圍投標文件（技術方案）
- 廣東省廣州市十校聯(lián)考2023-2024學年六年級上學期期末英語試卷
- 語文園地三（課件）2024~2025學年語文一年級上冊統(tǒng)編版
- 《3 我和鳥類做朋友》（教案）-2023-2024學年五年級上冊綜合實踐活動粵教版
評論
0/150
提交評論