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

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

函數(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ù)庫。該方法包含五個(gè)參數(shù)：數(shù)據(jù)庫名、版本號(hào)、描述、數(shù)據(jù)庫大小、回調(diào)函數(shù)，其中回調(diào)函數(shù)可以省略。通過事務(wù)執(zhí)行SQL：transaction()方法接收一個(gè)方法作為參數(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ù)庫所取代，目前瀏覽器正在逐步實(shí)現(xiàn)對(duì)索引數(shù)據(jù)庫的支持。索引數(shù)據(jù)庫以window.indexDB作為入口，但各個(gè)瀏覽器增加了前綴，獲取方式一般采用。采用command->request->result的調(diào)用方式，比如打開數(shù)據(jù)庫，返回一個(gè)request，在request的result中得到返回的數(shù)據(jù)庫引用。varindexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB||window.msIndexedDB;索引數(shù)據(jù)庫打開數(shù)據(jù)庫onupgradeneeded這個(gè)回調(diào)函數(shù)：當(dāng)數(shù)據(jù)庫發(fā)生改變時(shí)調(diào)用。比如，當(dāng)某個(gè)數(shù)據(jù)庫不存在需要?jiǎng)?chuàng)建，或者數(shù)據(jù)庫更改時(shí)。一般在該回調(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");//對(duì)象庫varobjectStore=transaction.objectStore("people");//添加對(duì)象

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"+