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

函數功能openDatabase()打開數據庫或者創建新的數據庫transaction()控制事務的提交和回滾executeSql()執行SQL語句WebSQLDatabase打開數據庫：使用openDatabase（）方法打開數據庫，如果該數據庫不存在，則創建新的數據庫。該方法包含五個參數：數據庫名、版本號、描述、數據庫大小、回調函數，其中回調函數可以省略。通過事務執行SQL：transaction()方法接收一個方法作為參數，在該方法中執行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")');});索引數據庫WebSQLDatabase已被較新的規范——索引數據庫所取代，目前瀏覽器正在逐步實現對索引數據庫的支持。索引數據庫以window.indexDB作為入口，但各個瀏覽器增加了前綴，獲取方式一般采用。采用command->request->result的調用方式，比如打開數據庫，返回一個request，在request的result中得到返回的數據庫引用。varindexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB||window.msIndexedDB;索引數據庫打開數據庫onupgradeneeded這個回調函數：當數據庫發生改變時調用。比如，當某個數據庫不存在需要創建，或者數據庫更改時。一般在該回調函數內創建objectStore，相當于數據庫中的一張表。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]);}};索引數據庫插入數據//界面控件數據獲取varname=document.getElementById('txtName').valuevaremail=document.getElementById('txtEmail').value;//事務vartransaction=db.transaction("people","readwrite");//對象庫varobjectStore=transaction.objectStore("people");//添加對象

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

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