HTML5本地存儲不完全指南

1、歷史 在html5本地存儲之前，如果我們想在客戶端保存持久化數(shù)據(jù)，有這么幾個選擇： 1. http cookie。http cookie的缺點很明顯，最多只能存儲4kb的數(shù)據(jù)，每個http請求都會被傳送回服務(wù)器，明文傳輸（除非你使用ssl）。 2. ie userdata。userdata是微軟在上世紀(jì)90年代的瀏覽器大戰(zhàn)時推出的本地存儲方案，借助dhtml的behaviour屬性來存儲本地數(shù)據(jù)， 允許每個頁面最多存儲64k數(shù)據(jù)，每個站點最多640k數(shù)據(jù)，userdata的缺點顯而易見，它不是web標(biāo)準(zhǔn)的一部分，除非你的程序只需要支持ie， 否則它基本沒什么用處。 3. flash cooki

2、e。flash cookie的名字有些誤導(dǎo)，它實際上和http cookie并不是一回事，或許它的名字應(yīng)該叫做flash本地存儲”，flash cookie默認(rèn)允許每個站點存儲不超過100k的數(shù)據(jù)，如果超出了，flash會自動向用戶請求更大的存儲空間，借助flash的 externalinterface接口，你可以很輕松地通過javascript操作flash的本地存儲。flash的問題很簡單，就是因為它是 flash。 4. google gears。gears是google在07年發(fā)布的一個開源瀏覽器插件，旨在改進各大瀏覽器的兼容性，gears內(nèi)置了一個基于sqlite的嵌入式 sql數(shù)據(jù)

3、庫，并提供了統(tǒng)一api對數(shù)據(jù)庫進行訪問，在取得用戶授權(quán)之后，每個站點可以在sql數(shù)據(jù)庫中存儲不限大小的數(shù)據(jù)，gears的問題就是 google自己都已經(jīng)不用它了?，F(xiàn)狀 我們現(xiàn)在通常所說的html5本地存儲，一般指的是web storage規(guī)范，這個標(biāo)準(zhǔn)曾經(jīng)是html5規(guī)范的一部分，但后來因為種種原因從html5規(guī)范中分離了出來。但是除了web storage，html5的本地存儲標(biāo)準(zhǔn)還有另外2個競爭者：web sql database和indexeddb。下面就讓我們依次來看看這3個規(guī)范吧。 web storage web storage是目前得到支持最廣泛的html5本地存儲規(guī)范：ie 8+

4、、ff 3.5+、safari 4+、chrome 4+、opera 10.5+，以及iphone 2+和android 2+都已經(jīng)支持web storage，要判斷你的瀏覽器是否支持web storage，可以使用下面這個函數(shù)： 代碼 1. functionsupports_html5_storage() 2. try 3. returnlocalstorageinwindow&windowlocalstorage!=null; 4. catch(e) 5. returnfalse; 6. 7. function supports_html5_storage() try return loc

5、alstorage in window & windowlocalstorage != null; catch (e) return false; html5 storage的使用非常簡單： 代碼 1. varfoo=localstorage.getitem(bar); 2. /. 3. localstorage.setitem(bar,foo);var foo = localstorage.getitem(bar);/ .localstorage.setitem(bar, foo);你也可以寫成下面這樣： 代碼 1. varfoo=localstoragebar; 2. /. 3. loca

6、lstoragebar=foo;var foo = localstoragebar;/ .localstoragebar = foo;如果要將某個key從存儲空間刪除，可以調(diào)用removeitem： 代碼 1. localstorage.removeitem(foo);localstorage.removeitem(foo);你也可以像遍歷數(shù)組那樣遍歷存儲的所有鍵值對象： 代碼 1. for(vari=0;ivarkey=localstorage.key(i); 2. console.log(key+:+localstoragekey); 3. for(var i=0; ivar key =

7、localstorage.key(i); console.log(key + : + localstoragekey);如果你的程序需要在不同頁面訪問同一個值，你可能需要了解這個值是否已經(jīng)被其他頁面改變了，這可以通過向瀏覽器注冊storage事件來實現(xiàn)： 代碼 1. window.addeventlistener(storage,function(e) 2. console.log(e.key+svalueischangedfrom+ 3. e.oldvalue+to+e.newvalue+by+e.url); 4. ,false); 5. 6. /a頁面 7. localstoragefoo

8、=bar; 8. 9. /b頁面 10. localstoragefoo=newbar;window.addeventlistener(storage, function(e) console.log(e.key + s value is changed from + e.oldvalue + to + e.newvalue + by + e.url);, false);/a頁面localstoragefoo = bar;/b頁面localstoragefoo = newbar;這時你應(yīng)該會在a頁面的console中看到： foos value is changed from bar to n

9、ewbar by http:/localhost/test.html 要注意的是，storage事件僅僅只是通知你某個鍵對應(yīng)的值已經(jīng)發(fā)生了改變，你沒有辦法在回調(diào)中阻止這個改變發(fā)生。 html5 storage看起來不錯，那它有沒什么缺點呢？好問題。要說html5 storage的缺點，唯一的問題就是它默認(rèn)的quota只有5mb，并且你沒辦法通過程序自行或是提示用戶來增加存儲空間。唯一的辦法就是用戶自己打開 瀏覽器的設(shè)置，并手動修改quota的大小，如果超出了5mb的限制，你將會遇到一個“quota_exceeded_err”的錯誤。 web sql database web sql datab

10、ase是一個已經(jīng)廢棄的規(guī)范，但是鑒于除了ie和firefox，其他瀏覽器都已經(jīng)實現(xiàn)了web sql database，并且它還具有一些html5 storage所不具有的特性，所以還是值得了解一下的。 web sql database就像它的名字那樣，就是一個讓你可以在web上直接使用的sql數(shù)據(jù)庫，你要做的就是打開數(shù)據(jù)庫，然后執(zhí)行sql，和你對mysql做的事情沒什么兩樣： 代碼 1. opendatabase(documents,1.0,localdocumentstorage,5*1024*1024, 2. function(db) 3. db.changeversion(,1.0,fu

11、nction(t) 4. t.executesql(createtabledocids(id,name); 5. ,error); 6. );opendatabase(documents, 1.0, local document storage, 5*1024*1024,function (db) db.changeversion(, 1.0, function (t) t.executesql(create table docids (id, name); , error););關(guān)于web sql database的更多介紹，可以參看這篇指南。 但是它的缺點也同樣明顯。最大的問題就出在sql

12、上，實際上并不存在一種叫做sql的標(biāo)準(zhǔn)結(jié)構(gòu)化查詢語言，我們平常使用的實際上是ms sql、oracle sql、mysql sql、postgre sql或者sqlite sql（盡管有一個叫做sql-92的規(guī)范，但它基本形同虛設(shè)），更進一步，甚至都不存在sqlite sql，我們使用的實際上是sqlite x.y.z sql，而這也就是web sql database最大的問題，它無法統(tǒng)一各個瀏覽器廠商實現(xiàn)的sql語言，如果你的某條web sql查詢只能在chrome上運行，這還能叫做標(biāo)準(zhǔn)嗎？ 所以，如果你現(xiàn)在訪問web sql database的規(guī)范頁面，你會在頂部看到這樣一則聲明： 這個

13、規(guī)范已經(jīng)陷入了一個僵局：目前的所有實現(xiàn)都是基于同一個sql后端（sqlite），但是我們需要更多的獨立實現(xiàn)來完成標(biāo)準(zhǔn)化，所以除非有廠商愿意獨立實現(xiàn)這個規(guī)范，否則當(dāng)前的sql規(guī)范只能采用sqlite的sql方言，而作為一個標(biāo)準(zhǔn)，這是不可接受的。 indexeddb 最后我們要介紹的就是indexeddb了，相比其他兩個規(guī)范，目前只有firefox實現(xiàn)了indexeddb（順便提一下，mozilla表示它們永遠(yuǎn)不會去實現(xiàn)web sql database），不過google已經(jīng)表示正在考慮在chrome中加入indexdb支持。 indexeddb引入了一個object store的概念，這有點像是

14、一個sql database，你可以在“數(shù)據(jù)庫”中存儲“記錄”，并且每條“記錄”可以擁有很多“字段，每個字段都有一個特定的數(shù)據(jù)類型，你可以選擇記錄的子集， 并使用“光標(biāo)”進行遍歷，同時object store中的所有變更都是基于“事務(wù)”的。 下面讓我們來看一個小例子： 代碼 1. varrequest=window.indexeddb.open(candydb, 2. mycandystoredatabase); 3. request.onsuccess=function(event) 4. vardb=event.result; 5. if(db.version!=1) 6. /usersf

15、irstvisit,initializedatabase. 7. varcreatedobjectstorecount=0; 8. varobjectstores= 9. name:kids,keypath:id,autoincrement:true, 10. name:candy,keypath:id,autoincrement:true, 11. name:candysales,keypath:,autoincrement:true 12. ; 13. 14. functionobjectstorecreated(event) 15. if(+createdobjectstorecount=objectstores.length) 16. db.setversion(1).onsuccess=function(event) 17. loaddata(db); 18. ; 19. 20. 21. 22. for(varindex=0;indexobjectstores.length;index+) 23. varparams=o