《HTML5程序設(shè)計及實踐》課件第7章 HTML5 Web存儲

第7章HTML5Web存儲目錄Web存儲WebSQLDatabase索引數(shù)據(jù)庫認(rèn)識Web存儲兩種Web存儲方式會話存儲（SessionStorage）：它的訪問性上只限于當(dāng)前頁面，并且頁面關(guān)閉后會消失，通過sessionStorage進(jìn)行訪問。本地存儲（LocalStorage）：沒有時間限制的數(shù)據(jù)存儲，通過localStorage進(jìn)行訪問。WebStorage和Cookie的異同網(wǎng)絡(luò)傳輸：Cookie會隨著請求發(fā)送到服務(wù)器端，而WebStorage數(shù)據(jù)存在客戶端，不會與服務(wù)器發(fā)交互。存儲限制：Cookie存儲的數(shù)據(jù)大小限制為4KB，而WebStorage能夠提供更大容量的存儲設(shè)計，根據(jù)瀏覽器不同，可以存儲5MB左右的數(shù)據(jù)。數(shù)據(jù)接口：WebStorage提供豐富的數(shù)據(jù)接口，開發(fā)人員可以方便的訪問數(shù)據(jù)，而Cookie則需要開發(fā)人員自行開發(fā)接口。存儲空間：WebStorage每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，因此不會造成數(shù)據(jù)混亂。Web存儲API函數(shù)名功能length存儲的鍵/值對的數(shù)量key(n)返回存儲的第N個鍵。getItem(key)返回鍵key對應(yīng)的值。如果值不存在，則返回空null。注意，返回的值是一個字符串。如果你存儲的值是整數(shù)或布爾型，你需要類型轉(zhuǎn)換。setItem(key,value)把值插入到key鍵中removeItem(key)移除某個鍵對應(yīng)的值（包含鍵本身）。如果鍵不存在，此方法什么也不做。clear清空存儲的鍵/值數(shù)據(jù)WebSQLDatabaseWebSQLDatabase允許應(yīng)用程序通過一個異步JavaScript接口訪問SQLLite數(shù)據(jù)庫，HTML5的WebSQLDatabaseAPI有三個核心的方法

函數(shù)功能openDatabase()打開數(shù)據(jù)庫或者創(chuàng)建新的數(shù)據(jù)庫transaction()控制事務(wù)的提交和回滾executeSql()執(zhí)行SQL語句WebSQLDatabase打開數(shù)據(jù)庫：使用openDatabase（）方法打開數(shù)據(jù)庫，如果該數(shù)據(jù)庫不存在，則創(chuàng)建新的數(shù)據(jù)庫。該方法包含五個參數(shù)：數(shù)據(jù)庫名、版本號、描述、數(shù)據(jù)庫大小、回調(diào)函數(shù)，其中回調(diào)函數(shù)可以省略。通過事務(wù)執(zhí)行SQL：transaction()方法接收一個方法作為參數(shù)，在該方法中執(zhí)行SQL腳本vardb=openDatabase('student','1.0',’StudentInfo',5*1024);vardb=openDatabase('student','1.0','StudentInfo',5*1024);db.transaction(function(tx){ tx.executeSql('CREATETABLEstudentinfo(idINTEGER,nameTEXT)'); tx.executeSql('INSERTINTOstudentinfo(id,name)Values(1,"zhangsan")');});索引數(shù)據(jù)庫WebSQLDatabase已被較新的規(guī)范——索引數(shù)據(jù)庫所取代，目前瀏覽器正在逐步實現(xiàn)對索引數(shù)據(jù)庫的支持。索引數(shù)據(jù)庫以window.indexDB作為入口，但各個瀏覽器增加了前綴，獲取方式一般采用。采用command->request->result的調(diào)用方式，比如打開數(shù)據(jù)庫，返回一個request，在request的result中得到返回的數(shù)據(jù)庫引用。varindexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB||window.msIndexedDB;索引數(shù)據(jù)庫打開數(shù)據(jù)庫onupgradeneeded這個回調(diào)函數(shù)：當(dāng)數(shù)據(jù)庫發(fā)生改變時調(diào)用。比如，當(dāng)某個數(shù)據(jù)庫不存在需要創(chuàng)建，或者數(shù)據(jù)庫更改時。一般在該回調(diào)函數(shù)內(nèi)創(chuàng)建objectStore，相當(dāng)于數(shù)據(jù)庫中的一張表。varpeopleData=[{name:"JohnDow",email:"john@"},{name:"DonDow",email:"don@"}];vardb;varrequest=indexedDB.open("PeopleDB",1);request.onsuccess=function(evt){db=request.result;};request.onerror=function(evt){console.log("IndexedDBerror:"+evt.target.errorCode);};request.onupgradeneeded=function(evt){varobjectStore=evt.currentTarget.result.createObjectStore("people",{keyPath:"id",autoIncrement:true});objectStore.createIndex("name","name",{unique:false});objectStore.createIndex("email","email",{unique:true});for(iinpeopleData){objectStore.add(peopleData[i]);}};索引數(shù)據(jù)庫插入數(shù)據(jù)//界面控件數(shù)據(jù)獲取varname=document.getElementById('txtName').valuevaremail=document.getElementById('txtEmail').value;//事務(wù)vartransaction=db.transaction("people","readwrite");//對象庫varobjectStore=transaction.objectStore("people");//添加對象

varrequest=objectStore.add({name:name,email:email});request.onsuccess=function(event){

};索引數(shù)據(jù)庫瀏覽數(shù)據(jù)//輸出區(qū)域varoutput=document.getElementById('printOutput');output.textContent="";//事務(wù)vartransaction=db.transaction("people","readwrite");varobjectStore=transaction.objectStore("people");//打開數(shù)據(jù)表varrequest=objectStore.openCursor();request.onsuccess=function(event){varcursor=event.target.result;if(cursor){output.textContent+="id:"+cursor.key+"is"+