版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領
文檔簡介
目錄Web存儲概述WebStorage存儲方式實例8-3：打開、創(chuàng)建數(shù)據(jù)庫WebDB存儲方式實例8-1：統(tǒng)計訪問頁面的次數(shù)實例8-2：網(wǎng)頁計數(shù)器實例8-4：調(diào)用并執(zhí)行SQL語句實例8-5：在網(wǎng)頁中獲取并顯示數(shù)據(jù)綜合實例：保存并讀取登錄用戶名和密碼1Web存儲概述全新的HTML5標記語言Web存儲機制應用中，我們可以將數(shù)據(jù)存放在客戶端，而無需使用專業(yè)的數(shù)據(jù)庫工具，主要在以下三個方面作了加強：對于Web開發(fā)者來說，提供了容易使用的API接口，通過設置鍵值對即可使用。在存儲的容量方面，根據(jù)用戶分配的磁盤配額進行存儲，可以在每個用戶域下存儲不少于5～10MB的內(nèi)容。這就意味者，用戶可以不僅僅存儲Session了，還可以在客戶端存儲用戶的設置偏好、本地化的數(shù)據(jù)、離線的數(shù)據(jù)，這對提高訪問效率很有幫助。提供了使用JavaScript編程的接口，這樣開發(fā)者可以使用JavaScript在客戶端完成很多以前要在服務端才能完成的工作。2W
e
b
S
t
o
r
a
g
e
存儲方式WebStorage是HTML5引入的一個非常重要的功能，在前端開發(fā)中經(jīng)常用到，可以在客戶端本地存儲數(shù)據(jù)，類似cookie，但實現(xiàn)功能要比cookie強大的多，cookie大小被限制在4KB，WebStorage官方建議為每個網(wǎng)站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）存儲方式，它內(nèi)置了SQLite數(shù)據(jù)庫，對數(shù)據(jù)庫的操作可以通過調(diào)用executeSql()方法實現(xiàn)，允許使用JavaScript代碼控制數(shù)據(jù)庫的操作。在HTML5標記語言中，WebDB可以實現(xiàn)數(shù)據(jù)的本地存儲，它提供了關系數(shù)據(jù)庫的基本功能，可以存儲頁面中交互的、復雜的數(shù)據(jù)。WebDB既可以保存數(shù)據(jù)，也可以緩存從服務器獲取的數(shù)據(jù)。WebDB通過事務驅(qū)動實現(xiàn)對數(shù)據(jù)的管理，因此可以支持多瀏覽器的并發(fā)操作，而不發(fā)生存儲時的沖突。如果要通過WebDB進行本地數(shù)據(jù)的存儲，首先需要打開或創(chuàng)建一個數(shù)據(jù)庫，打開或創(chuàng)建數(shù)據(jù)庫的API是openDatabase，其調(diào)用代碼如下所示。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í)行的一個回調(diào)函數(shù)。當調(diào)用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
網(wǎng)頁計數(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
網(wǎng)頁計數(shù)器
document.write("Visits"+sessionStorage.pagecount+"time(s)thissession.");</script><p>刷新頁面會看到計數(shù)器在增長。</p><p>請關閉瀏覽器窗口，然后再試一次，計數(shù)器已經(jīng)重置了。</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ù)庫”按鈕時，調(diào)用自定義函數(shù)btnCreateDb_Click()，通過此函數(shù)“創(chuàng)建/打開”一個名為“Student”的數(shù)據(jù)庫對象，此數(shù)據(jù)對象的版本號為“1.0”，大小為2MB。如果創(chuàng)建成功則執(zhí)行回調(diào)函數(shù)，并在回調(diào)函數(shù)中顯示執(zhí)行成功的提示信息。（3）當單擊“測試連接”按鈕時，調(diào)用另外一個自定義的函數(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ù)庫”按鈕時調(diào)用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ù)庫
//點擊“測試連接”按鈕時調(diào)用functionbtnTestConn_Click(){if(db){$$("pStatus").style.display="block";$$("pStatus").innerHTML="數(shù)據(jù)庫連接成功!";}}7實例8-4
調(diào)用并執(zhí)行S
QL語句
具體實現(xiàn)流程如下：（1）在頁面中創(chuàng)建一個用于輸入學生資料信息的頁面，用戶可以在頁面中輸入姓名、性別、總分。（2）單擊“提交”按鈕后，將提交的數(shù)據(jù)信息通過調(diào)用executeSql()方法插入到表StuInfo中，并將執(zhí)行結(jié)果返回顯示在頁面中。實例文件8-4.html的具體代碼如下所示：<scripttype="text/JavaScript"language="jscript"src="js4.js"/></script></head><bodyonLoad="Init_Data();"><pid="pStatus"></p><fieldset>7實例8-4
調(diào)用并執(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
調(diào)用并執(zhí)行S
QL語句
</span><pclass="btn"><inputid="btnAdd"type="button"value="提交"class="inputbtn"onClick="btnAdd_Click();"></p></fieldset></body>7實例8-4
調(diào)用并執(zhí)行S
QL語句
腳本文件中程序的具體實現(xiàn)流程如下：（1）在事務處理過程中調(diào)用executeSql()方法執(zhí)行編寫好的SQL語句。（2）在執(zhí)行時獲取在頁面中輸入的各項信息值作為實參，傳遞給SQL語句中的形參，從而將頁面中輸入的數(shù)據(jù)插入到表“StuInfo”中。腳本文件js4.js的具體代碼如下所示。function$$(id){returndocument.getElementById(id);}vardb;//單擊“提交”按鈕時調(diào)用7實例8-4
調(diào)用并執(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
調(diào)用并執(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
調(diào)用并執(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
調(diào)用并執(zhí)行S
QL語句
在上述中，加載頁面時先調(diào)用一個自定義的函數(shù)Init_Data()。該函數(shù)可以隨機生成一個6位數(shù)的字符，并將該值賦于頁面中的“學號”文本框。為了使該學號不能修改，特意將此文本框的屬性設置為“只讀”。當完成輸入學生信息的其他資料，單擊“提交”按鈕調(diào)用自定義的函數(shù)btnAddC1ick()，此函數(shù)先打開數(shù)據(jù)庫。當成功執(zhí)行SQL語句后，會清空頁面中原有的內(nèi)容值，并顯示“成功增加1條記錄!”的提示。如果SQL語句執(zhí)行出錯，將在頁面中顯示錯誤對象ex返回的信息提示。同樣，此程序也需要在SQLite環(huán)境中進行測試，在PC瀏覽器中的頁面效果如下圖所示。執(zhí)行效果8實例8-5
在網(wǎng)頁中獲取并顯示數(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。在接下來的內(nèi)容中，將通過一個演示實例來講解通過遍歷的方式在網(wǎng)頁中獲取并顯示數(shù)據(jù)的方法。具體實現(xiàn)流程如下：（1）在網(wǎng)頁中設置一個文本框。（2）當在文本框中輸入內(nèi)容并單擊“發(fā)表”按鈕后，可以通過localStorage對象保存輸入的數(shù)據(jù)，并在頁面中實時顯示這些數(shù)據(jù)。8實例8-5
在網(wǎng)頁中獲取并顯示數(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
在網(wǎng)頁中獲取并顯示數(shù)據(jù)
腳本文件中程序的具體實現(xiàn)流程如下：（1）設置在加載頁面時會調(diào)用自定義的函數(shù)getlocalData()，此函數(shù)具體實現(xiàn)流程為：根據(jù)localStorage對象的length值，使用for語句遍歷localStorage對象保存的全部數(shù)據(jù)。在遍歷過程中，通過strKey變量保存每次遍歷的鍵名。在獲取鍵名后，為了只獲取localStorage對象中保存的點評數(shù)據(jù)，檢測鍵名前3個字符是否為cnt，如果是，則通過getItem()方法獲取鍵名對應的鍵值，并保存在strVal變量中。因為鍵值是由“，”組成的字符串，所以先通過數(shù)組strArr保存分割后的各項數(shù)值，然后通過數(shù)組下標將各項獲取的內(nèi)容顯示在頁面中。8實例8-5
在網(wǎng)頁中獲取并顯示數(shù)據(jù)
（2）如果在頁面中輸入點評內(nèi)容，單擊“發(fā)表”按鈕后會調(diào)用自定義的函數(shù)btnAdd_Click()，此函數(shù)的實現(xiàn)流程為：先獲取點評內(nèi)容，然后將內(nèi)容存儲在strContent變量中。為了使保存內(nèi)容的鍵名不重復，并且具有標記性，在生成鍵名時調(diào)用函數(shù)RetRndNum()，隨機生成一個4位數(shù)字，并與字符cnt組合成新的字符串，保存在strKey變量中。為了保存更多的數(shù)據(jù)信息，保存點評內(nèi)容的strContent變量通過“，”與時間數(shù)據(jù)組合成新的字符串，保存在strVal變量中。最后，通過setItem()方法將strKey變量與strVal變量分別作為鍵名與鍵值保存在localStorage對象中。8實例8-5
在網(wǎng)頁中獲取并顯示數(shù)據(jù)
腳本文件js5.js的具體代碼如下所示。//JavaScriptDocumentfunction$$(id){returndocument.getElementById(id);}functionbtnAdd_Click(){ //點擊"發(fā)表"按鈕時調(diào)用varstrContent=$$("txtContent").value; //獲取文本框中的內(nèi)容 varstrTime=newDate(); //定義一個日期型對象 if(strContent.length>0){ //如果不為空，則保存varstrKey="cnt"+RetRndNum(4);varstrVal=strContent+","+strTime.toLocaleTimeString();localStorage.setItem(strKey,strVal);}8實例8-5
在網(wǎng)頁中獲取并顯示數(shù)據(jù)
getlocalData(); //重新加載$$("txtContent").value=""; //清空原先內(nèi)容}functiongetlocalData(){ //獲取保存數(shù)據(jù)并顯示在頁面中varstrHTML="<liclass='li_h'>"; //標題部分strHTML+="<spanclass='spn_a'>編號</span>";strHTML+="<spanclass='spn_b'>內(nèi)容</span>
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 供排水合同范本
- 別墅出租居間合同范本
- 養(yǎng)殖山羊合作合同范本
- 三間住房合同范本
- 買礦山合同范本
- 判決終止服務合同范本
- 2025年度國際貨物鐵路運輸與全面保險服務合同
- 三人合伙開店分紅合同范本
- 勞動合同個人申請書
- 會務會展合同范例
- 質(zhì)量管理體系策劃-烏龜圖
- 信訪工作課件
- 安全生產(chǎn)的科技創(chuàng)新與成果轉(zhuǎn)化應用
- 王洪圖黃帝內(nèi)經(jīng)80課時講稿
- 英語課堂游戲PPT-英語游戲4個PPT-(切西瓜-打地鼠-開火車-植物大戰(zhàn)僵尸)
- 大學物理光學總結(jié)-大學物理光學知識點總結(jié)課件
- 關于領導干部報告?zhèn)€人有關事項的規(guī)定全文
- 個人借條電子版模板
- 物業(yè)公司特色服務、日常增值服務項目供參考
- 創(chuàng)新創(chuàng)業(yè)實務PPT全套完整教學課件
- 工業(yè)企業(yè)電源快速切換裝置設計配置導則
評論
0/150
提交評論