HTML5本地存儲(chǔ)不完全指南

三里屯搖滾

HTML5本地存儲(chǔ)不完全指南

歷史

在HTML5本地存儲(chǔ)之前，如果我們想在客戶端保存持久化數(shù)據(jù)，有這么幾個(gè)選擇：



1.HTTP cookie。HTTP cookie的缺點(diǎn)很明顯，最多只能存儲(chǔ)4KB的數(shù)據(jù)，每個(gè)HTTP請(qǐng)求都會(huì)被傳送回服務(wù)器，明文傳輸（除非你使用SSL）。
2.IE userData。userData是微軟在上世紀(jì)90年代的瀏覽器大戰(zhàn)時(shí)推出的本地存儲(chǔ)方案，借助DHTML的behaviour屬性來(lái)存儲(chǔ)本地?cái)?shù)據(jù)， 允許每個(gè)頁(yè)面最多存儲(chǔ)64K數(shù)據(jù)，每個(gè)站點(diǎn)最多640K數(shù)據(jù)，userData的缺點(diǎn)顯而易見，它不是Web標(biāo)準(zhǔn)的一部分，除非你的程序只需要支持IE， 否則它基本沒什么用處。
3.Flash cookie。Flash cookie的名字有些誤導(dǎo)，它實(shí)際上和HTTP cookie并不是一回事，或許它的名字應(yīng)該叫做"Flash本地存儲(chǔ)”，F(xiàn)lash cookie默認(rèn)允許每個(gè)站點(diǎn)存儲(chǔ)不超過(guò)100K的數(shù)據(jù)，如果超出了，F(xiàn)lash會(huì)自動(dòng)向用戶請(qǐng)求更大的存儲(chǔ)空間，借助Flash的 ExternalInterface接口，你可以很輕松地通過(guò)Javascript操作Flash的本地存儲(chǔ)。Flash的問(wèn)題很簡(jiǎn)單，就是因?yàn)樗��?Flash。
4.Google Gears。Gears是Google在07年發(fā)布的一個(gè)開源瀏覽器插件，旨在改進(jìn)各大瀏覽器的兼容性，Gears內(nèi)置了一個(gè)基于SQLite的嵌入式 SQL數(shù)據(jù)庫(kù)，并提供了統(tǒng)一API對(duì)數(shù)據(jù)庫(kù)進(jìn)行訪問(wèn)，在取得用戶授權(quán)之后，每個(gè)站點(diǎn)可以在SQL數(shù)據(jù)庫(kù)中存儲(chǔ)不限大小的數(shù)據(jù)，Gears的問(wèn)題就是 Google自己都已經(jīng)不用它了。
現(xiàn)狀

我們現(xiàn)在通常所說(shuō)的HTML5本地存儲(chǔ)，一般指的是Web Storage規(guī)范，這個(gè)標(biāo)準(zhǔn)曾經(jīng)是HTML5規(guī)范的一部分，但后來(lái)因?yàn)榉N種原因從HTML5規(guī)范中分離了出來(lái)。但是除了Web Storage，HTML5的本地存儲(chǔ)標(biāo)準(zhǔn)還有另外2個(gè)競(jìng)爭(zhēng)者：Web SQL Database和IndexedDB。下面就讓我們依次來(lái)看看這3個(gè)規(guī)范吧。

Web Storage

Web Storage是目前得到支持最廣泛的HTML5本地存儲(chǔ)規(guī)范：IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+，以及iPhone 2+和Android 2+都已經(jīng)支持Web Storage，要判斷你的瀏覽器是否支持Web Storage，可以使用下面這個(gè)函數(shù)：


代碼

1. [code]1.function supports_html5_storage() {   
   
2. 2.    try {   
   
3. 3.        return 'localStorage' in window && window['localStorage'] !== null;   
   
4. 4.    } catch (e) {   
   
5. 5.        return false;   
   
6. 6.    }   
   
7. 7.}  

復(fù)制代碼

代碼  
1.<SPAN style="FONT-SIZE: small">function supports_html5_storage() {   
2.    try {   
3.        return 'localStorage' in window && window['localStorage'] !== null;   
4.    } catch (e) {   
5.        return false;   
6.    }   
7.}</SPAN>  
function supports_html5_storage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}[/code]HTML5 Storage的使用非常簡(jiǎn)單：


代碼

1. 1.var foo = localStorage.getItem("bar");   
   
2. 2.// ...   
   
3. 3.localStorage.setItem("bar", foo);  
   
4. 代碼  
   
5. 1.<SPAN style="FONT-SIZE: small">var foo = localStorage.getItem("bar");   
   
6. 2.// ...   
   
7. 3.localStorage.setItem("bar", foo);</SPAN>  
   
8. var foo = localStorage.getItem("bar");
   
9. // ...
   
10. localStorage.setItem("bar", foo);

復(fù)制代碼

你也可以寫成下面這樣：


代碼

1. 1.var foo = localStorage["bar"];   
   
2. 2.// ...   
   
3. 3.localStorage["bar"] = foo;  
   
4. 代碼  
   
5. 1.<SPAN style="FONT-SIZE: small">var foo = localStorage["bar"];   
   
6. 2.// ...   
   
7. 3.localStorage["bar"] = foo;</SPAN>  
   
8. var foo = localStorage["bar"];
   
9. // ...
   
10. localStorage["bar"] = foo;

復(fù)制代碼

如果要將某個(gè)key從存儲(chǔ)空間刪除，可以調(diào)用removeItem：


代碼

1. 1.localStorage.removeItem('foo');  
   
2. 代碼  
   
3. 1.<SPAN style="FONT-SIZE: small">localStorage.removeItem('foo');</SPAN>  
   
4. localStorage.removeItem('foo');

復(fù)制代碼

你也可以像遍歷數(shù)組那樣遍歷存儲(chǔ)的所有鍵值對(duì)象：


代碼

1. 1.for(var i=0; ivar key = localStorage.key(i);   
   
2. 2.    console.log(key + ":" + localStorage[key]);   
   
3. 3.}  
   
4. 代碼  
   
5. 1.<SPAN style="FONT-SIZE: small">for(var i=0; ivar key = localStorage.key(i);   
   
6. 2.    console.log(key + ":" + localStorage[key]);   
   
7. 3.}   
   
8. 4.</SPAN>  
   
9. for(var i=0; ivar key = localStorage.key(i);
   
10.     console.log(key + ":" + localStorage[key]);
    
11. }

復(fù)制代碼

如果你的程序需要在不同頁(yè)面訪問(wèn)同一個(gè)值，你可能需要了解這個(gè)值是否已經(jīng)被其他頁(yè)面改變了，這可以通過(guò)向?yàn)g覽器注冊(cè)storage事件來(lái)實(shí)現(xiàn)：


代碼

1. 1.window.addEventListener('storage', function(e) {   
   
2. 2.    console.log(e.key + "'s value is changed from '" +   
   
3. 3.        e.oldValue + "' to '" + e.newValue + "' by " + e.url);   
   
4. 4.}, false);   
   
5. 5.  
   
6. 6.//A頁(yè)面   
   
7. 7.localStorage['foo'] = 'bar';   
   
8. 8.  
   
9. 9.//B頁(yè)面   
   
10. 10.localStorage['foo'] = 'newBar';  

復(fù)制代碼

代碼

1. 1.<SPAN style="FONT-SIZE: small">window.addEventListener('storage', function(e) {   
   
2. 2.    console.log(e.key + "'s value is changed from '" +   
   
3. 3.        e.oldValue + "' to '" + e.newValue + "' by " + e.url);   
   
4. 4.}, false);   
   
5. 5.  
   
6. 6.//A頁(yè)面   
   
7. 7.localStorage['foo'] = 'bar';   
   
8. 8.  
   
9. 9.//B頁(yè)面   
   
10. 10.localStorage['foo'] = 'newBar';</SPAN>  
    
11. window.addEventListener('storage', function(e) {
    
12.     console.log(e.key + "'s value is changed from '" +
    
13.         e.oldValue + "' to '" + e.newValue + "' by " + e.url);
    
14. }, false);
    
15. 
    
16. //A頁(yè)面
    
17. localStorage['foo'] = 'bar';
    
18. 
    
19. //B頁(yè)面
    
20. localStorage['foo'] = 'newBar';
    
21. 這時(shí)你應(yīng)該會(huì)在A頁(yè)面的Console中看到：
    
22. 
    
23. foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html

復(fù)制代碼

要注意的是，storage事件僅僅只是通知你某個(gè)鍵對(duì)應(yīng)的值已經(jīng)發(fā)生了改變，你沒有辦法在回調(diào)中阻止這個(gè)改變發(fā)生。

HTML5 Storage看起來(lái)不錯(cuò)，那它有沒什么缺點(diǎn)呢？好問(wèn)題。要說(shuō)HTML5 Storage的缺點(diǎn)，唯一的問(wèn)題就是它默認(rèn)的QUOTA只有5MB，并且你沒辦法通過(guò)程序自行或是提示用戶來(lái)增加存儲(chǔ)空間。唯一的辦法就是用戶自己打開 瀏覽器的設(shè)置，并手動(dòng)修改QUOTA的大小，如果超出了5MB的限制，你將會(huì)遇到一個(gè)“QUOTA_EXCEEDED_ERR”的錯(cuò)誤。

Web SQL Database

Web SQL Database是一個(gè)已經(jīng)廢棄的規(guī)范，但是鑒于除了IE和Firefox，其他瀏覽器都已經(jīng)實(shí)現(xiàn)了Web SQL Database，并且它還具有一些HTML5 Storage所不具有的特性，所以還是值得了解一下的。

Web SQL Database就像它的名字那樣，就是一個(gè)讓你可以在Web上直接使用的SQL數(shù)據(jù)庫(kù)，你要做的就是打開數(shù)據(jù)庫(kù)，然后執(zhí)行SQL，和你對(duì)Mysql做的事情沒什么兩樣：


代碼

1. 1.openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,   
   
2. 2.function (db) {   
   
3. 3.    db.changeVersion('', '1.0', function (t) {   
   
4. 4.        t.executeSql('CREATE TABLE docids (id, name)');   
   
5. 5.    }, error);   
   
6. 6.});  

復(fù)制代碼

代碼

1. 1.<SPAN style="FONT-SIZE: small">openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,   
   
2. 2.function (db) {   
   
3. 3.    db.changeVersion('', '1.0', function (t) {   
   
4. 4.        t.executeSql('CREATE TABLE docids (id, name)');   
   
5. 5.    }, error);   
   
6. 6.});</SPAN>  
   
7. openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,
   
8. function (db) {
   
9.     db.changeVersion('', '1.0', function (t) {
   
10.         t.executeSql('CREATE TABLE docids (id, name)');
    
11.     }, error);
    
12. });

復(fù)制代碼

關(guān)于Web SQL Database的更多介紹，可以參看這篇指南。

但是它的缺點(diǎn)也同樣明顯。最大的問(wèn)題就出在SQL上，實(shí)際上并不存在一種叫做SQL的標(biāo)準(zhǔn)結(jié)構(gòu)化查詢語(yǔ)言，我們平常使用的實(shí)際上是MS SQL、Oracle SQL、MySQL SQL、postgre SQL或者SQLite SQL（盡管有一個(gè)叫做SQL-92的規(guī)范，但它基本形同虛設(shè)），更進(jìn)一步，甚至都不存在SQLite SQL，我們使用的實(shí)際上是SQLite x.y.z SQL，而這也就是Web SQL Database最大的問(wèn)題，它無(wú)法統(tǒng)一各個(gè)瀏覽器廠商實(shí)現(xiàn)的SQL語(yǔ)言，如果你的某條Web SQL查詢只能在Chrome上運(yùn)行，這還能叫做標(biāo)準(zhǔn)嗎？

所以，如果你現(xiàn)在訪問(wèn)Web SQL Database的規(guī)范頁(yè)面，你會(huì)在頂部看到這樣一則聲明：
這個(gè)規(guī)范已經(jīng)陷入了一個(gè)僵局：目前的所有實(shí)現(xiàn)都是基于同一個(gè)SQL后端（SQLite），但是我們需要更多的獨(dú)立實(shí)現(xiàn)來(lái)完成標(biāo)準(zhǔn)化，所以除非有廠商愿意獨(dú)立實(shí)現(xiàn)這個(gè)規(guī)范，否則當(dāng)前的SQL規(guī)范只能采用SQLite的SQL方言，而作為一個(gè)標(biāo)準(zhǔn)，這是不可接受的。

IndexedDB

最后我們要介紹的就是IndexedDB了，相比其他兩個(gè)規(guī)范，目前只有Firefox實(shí)現(xiàn)了IndexedDB（順便提一下，Mozilla表示它們永遠(yuǎn)不會(huì)去實(shí)現(xiàn)Web SQL Database），不過(guò)Google已經(jīng)表示正在考慮在Chrome中加入IndexDB支持。

IndexedDB引入了一個(gè)object store的概念，這有點(diǎn)像是一個(gè)SQL Database，你可以在“數(shù)據(jù)庫(kù)”中存儲(chǔ)“記錄”，并且每條“記錄”可以擁有很多“字段"，每個(gè)字段都有一個(gè)特定的數(shù)據(jù)類型，你可以選擇記錄的子集， 并使用“光標(biāo)”進(jìn)行遍歷，同時(shí)object store中的所有變更都是基于“事務(wù)”的。

下面讓我們來(lái)看一個(gè)小例子：


代碼

1. 1.var request = window.indexedDB.open("CandyDB",   
   
2. 2.                                    "My candy store database");   
   
3. 3.request.onsuccess = function(event) {   
   
4. 4.  var db = event.result;   
   
5. 5.  if (db.version != "1") {   
   
6. 6.    // User's first visit, initialize database.   
   
7. 7.    var createdObjectStoreCount = 0;   
   
8. 8.    var objectStores = [   
   
9. 9.      { name: "kids", keyPath: "id", autoIncrement: true },   
   
10. 10.      { name: "candy", keyPath: "id", autoIncrement: true },   
    
11. 11.      { name: "candySales", keyPath: "", autoIncrement: true }   
    
12. 12.    ];   
    
13. 13.  
    
14. 14.    function objectStoreCreated(event) {   
    
15. 15.      if (++createdObjectStoreCount == objectStores.length) {   
    
16. 16.        db.setVersion("1").onsuccess = function(event) {   
    
17. 17.          loadData(db);   
    
18. 18.        };   
    
19. 19.      }   
    
20. 20.    }   
    
21. 21.  
    
22. 22.    for (var index = 0; index < objectStores.length; index++) {   
    
23. 23.      var params = objectStores[index];   
    
24. 24.      request = db.createObjectStore(params.name, params.keyPath,   
    
25. 25.                                     params.autoIncrement);   
    
26. 26.      request.onsuccess = objectStoreCreated;   
    
27. 27.    }   
    
28. 28.  }   
    
29. 29.  else {   
    
30. 30.    // User has been here before, no initialization required.   
    
31. 31.    loadData(db);   
    
32. 32.  }   
    
33. 33.};  

復(fù)制代碼

代碼

1. 1.<SPAN style="FONT-SIZE: small">var request = window.indexedDB.open("CandyDB",   
   
2. 2.                                    "My candy store database");   
   
3. 3.request.onsuccess = function(event) {   
   
4. 4.  var db = event.result;   
   
5. 5.  if (db.version != "1") {   
   
6. 6.    // User's first visit, initialize database.   
   
7. 7.    var createdObjectStoreCount = 0;   
   
8. 8.    var objectStores = [   
   
9. 9.      { name: "kids", keyPath: "id", autoIncrement: true },   
   
10. 10.      { name: "candy", keyPath: "id", autoIncrement: true },   
    
11. 11.      { name: "candySales", keyPath: "", autoIncrement: true }   
    
12. 12.    ];   
    
13. 13.  
    
14. 14.    function objectStoreCreated(event) {   
    
15. 15.      if (++createdObjectStoreCount == objectStores.length) {   
    
16. 16.        db.setVersion("1").onsuccess = function(event) {   
    
17. 17.          loadData(db);   
    
18. 18.        };   
    
19. 19.      }   
    
20. 20.    }   
    
21. 21.  
    
22. 22.    for (var index = 0; index < objectStores.length; index++) {   
    
23. 23.      var params = objectStores[index];   
    
24. 24.      request = db.createObjectStore(params.name, params.keyPath,   
    
25. 25.                                     params.autoIncrement);   
    
26. 26.      request.onsuccess = objectStoreCreated;   
    
27. 27.    }   
    
28. 28.  }   
    
29. 29.  else {   
    
30. 30.    // User has been here before, no initialization required.   
    
31. 31.    loadData(db);   
    
32. 32.  }   
    
33. 33.};</SPAN>  
    
34. var request = window.indexedDB.open("CandyDB",
    
35.                                     "My candy store database");
    
36. request.onsuccess = function(event) {
    
37.   var db = event.result;
    
38.   if (db.version != "1") {
    
39.     // User's first visit, initialize database.
    
40.     var createdObjectStoreCount = 0;
    
41.     var objectStores = [
    
42.       { name: "kids", keyPath: "id", autoIncrement: true },
    
43.       { name: "candy", keyPath: "id", autoIncrement: true },
    
44.       { name: "candySales", keyPath: "", autoIncrement: true }
    
45.     ];
    
46. 
    
47.     function objectStoreCreated(event) {
    
48.       if (++createdObjectStoreCount == objectStores.length) {
    
49.         db.setVersion("1").onsuccess = function(event) {
    
50.           loadData(db);
    
51.         };
    
52.       }
    
53.     }
    
54. 
    
55.     for (var index = 0; index < objectStores.length; index++) {
    
56.       var params = objectStores[index];
    
57.       request = db.createObjectStore(params.name, params.keyPath,
    
58.                                      params.autoIncrement);
    
59.       request.onsuccess = objectStoreCreated;
    
60.     }
    
61.   }
    
62.   else {
    
63.     // User has been here before, no initialization required.
    
64.     loadData(db);
    
65.   }
    
66. };

復(fù)制代碼

關(guān)于Indexed的更多介紹可以參看Mozilla Blog的這篇指南。