碼上快樂

相關內容    簡體    繁體

關於html5緩存部分比較詳細的說明

本文轉載自   查看原文   2013-01-05 10:28   5419    HTML5

編輯推薦：這篇文章來自於黑客志，對HTML5的本次存儲方式進行了非常全面的介紹和分析，對於學習HTML5的開發者來說，不容錯過哦。

歷史

在HTML5本地存儲之前，如果我們想在客戶端保存持久化數據，有這么幾個選擇：

  1. HTTP cookie。HTTP cookie的缺點很明顯，最多只能存儲4KB的數據，每個HTTP請求都會被傳送回服務器，明文傳輸（除非你使用SSL）。
  2. IE userData。userData是微軟在上世紀90年代的瀏覽器大戰時推出的本地存儲方案，借助DHTML的behaviour屬性來存儲本地數據， 允許每個頁面最多存儲64K數據，每個站點最多640K數據，userData的缺點顯而易見，它不是Web標准的一部分，除非你的程序只需要支持IE， 否則它基本沒什么用處。
  3. Flash cookie。Flash cookie的名字有些誤導，它實際上和HTTP cookie並不是一回事，或許它的名字應該叫做"Flash本地存儲”，Flash cookie默認允許每個站點存儲不超過100K的數據，如果超出了，Flash會自動向用戶請求更大的存儲空間，借助Flash的 ExternalInterface接口，你可以很輕松地通過Javascript操作Flash的本地存儲。Flash的問題很簡單，就是因為它是 Flash。
  4. Google Gears。Gears是Google在07年發布的一個開源瀏覽器插件，旨在改進各大瀏覽器的兼容性，Gears內置了一個基於SQLite的嵌入式 SQL數據庫，並提供了統一API對數據庫進行訪問，在取得用戶授權之后，每個站點可以在SQL數據庫中存儲不限大小的數據，Gears的問題就是 Google自己都已經不用它了。

現狀

我們現在通常所說的HTML5本地存儲，一般指的是Web Storage規范，這個標准曾經是HTML5規范的一部分，但后來因為種種原因從HTML5規范中分離了出來。但是除了Web Storage，HTML5的本地存儲標准還有另外2個競爭者：Web SQL Database和IndexedDB。下面就讓我們依次來看看這3個規范吧。

Web Storage

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

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


HTML5 Storage的使用非常簡單：

代碼 復制代碼
  1. var foo = localStorage.getItem("bar");   
  2. // ...   
  3. localStorage.setItem("bar", foo);  
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);


你也可以寫成下面這樣：

代碼 復制代碼
  1. var foo = localStorage["bar"];   
  2. // ...   
  3. localStorage["bar"] = foo;  
var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;


如果要將某個key從存儲空間刪除，可以調用removeItem：

代碼 復制代碼
  1. localStorage.removeItem('foo');  
localStorage.removeItem('foo');



你也可以像遍歷數組那樣遍歷存儲的所有鍵值對象：

代碼 復制代碼
  1. for(var i=0; ivar key = localStorage.key(i);   
  2.     console.log(key + ":" + localStorage[key]);   
  3. }  
for(var i=0; ivar key = localStorage.key(i);
    console.log(key + ":" + localStorage[key]);
}


如果你的程序需要在不同頁面訪問同一個值，你可能需要了解這個值是否已經被其他頁面改變了，這可以通過向瀏覽器注冊storage事件來實現：

代碼 復制代碼
  1. window.addEventListener('storage', function(e) {   
  2.     console.log(e.key + "'s value is changed from '" +   
  3.         e.oldValue + "' to '" + e.newValue + "' by " + e.url);   
  4. }, false);   
  5.   
  6. //A頁面   
  7. localStorage['foo'] = 'bar';   
  8.   
  9. //B頁面   
  10. localStorage['foo'] = '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頁面
localStorage['foo'] = 'bar';

//B頁面
localStorage['foo'] = 'newBar';


這時你應該會在A頁面的Console中看到：

foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html

要注意的是，storage事件僅僅只是通知你某個鍵對應的值已經發生了改變，你沒有辦法在回調中阻止這個改變發生。

HTML5 Storage看起來不錯，那它有沒什么缺點呢？好問題。要說HTML5 Storage的缺點，唯一的問題就是它默認的QUOTA只有5MB，並且你沒辦法通過程序自行或是提示用戶來增加存儲空間。唯一的辦法就是用戶自己打開 瀏覽器的設置，並手動修改QUOTA的大小，如果超出了5MB的限制，你將會遇到一個“QUOTA_EXCEEDED_ERR”的錯誤。

Web SQL Database

Web SQL Database是一個已經廢棄的規范，但是鑒於除了IE和Firefox，其他瀏覽器都已經實現了Web SQL Database，並且它還具有一些HTML5 Storage所不具有的特性，所以還是值得了解一下的。

Web SQL Database就像它的名字那樣，就是一個讓你可以在Web上直接使用的SQL數據庫，你要做的就是打開數據庫，然后執行SQL，和你對Mysql做的事情沒什么兩樣：

代碼 復制代碼
  1. openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,   
  2. function (db) {   
  3.     db.changeVersion('', '1.0', function (t) {   
  4.         t.executeSql('CREATE TABLE docids (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);
});


關於Web SQL Database的更多介紹，可以參看這篇指南。

但是它的缺點也同樣明顯。最大的問題就出在SQL上，實際上並不存在一種叫做SQL的標准結構化查詢語言，我們平常使用的實際上是MS SQL、Oracle SQL、MySQL SQL、postgre SQL或者SQLite SQL（盡管有一個叫做SQL-92的規范，但它基本形同虛設），更進一步，甚至都不存在SQLite SQL，我們使用的實際上是SQLite x.y.z SQL，而這也就是Web SQL Database最大的問題，它無法統一各個瀏覽器廠商實現的SQL語言，如果你的某條Web SQL查詢只能在Chrome上運行，這還能叫做標准嗎？

所以，如果你現在訪問Web SQL Database的規范頁面，你會在頂部看到這樣一則聲明：
這個規范已經陷入了一個僵局：目前的所有實現都是基於同一個SQL后端（SQLite），但是我們需要更多的獨立實現來完成標准化，所以除非有廠商願意獨立實現這個規范，否則當前的SQL規范只能采用SQLite的SQL方言，而作為一個標准，這是不可接受的。

IndexedDB

最后我們要介紹的就是IndexedDB了，相比其他兩個規范，目前只有Firefox實現了IndexedDB（順便提一下，Mozilla表示它們永遠不會去實現Web SQL Database），不過Google已經表示正在考慮在Chrome中加入IndexDB支持。

IndexedDB引入了一個object store的概念，這有點像是一個SQL Database，你可以在“數據庫”中存儲“記錄”，並且每條“記錄”可以擁有很多“字段"，每個字段都有一個特定的數據類型，你可以選擇記錄的子集， 並使用“光標”進行遍歷，同時object store中的所有變更都是基於“事務”的。

下面讓我們來看一個小例子：

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

    function objectStoreCreated(event) {
      if (++createdObjectStoreCount == objectStores.length) {
        db.setVersion("1").onsuccess = function(event) {
          loadData(db);
        };
      }
    }

    for (var index = 0; index < objectStores.length; index++) {
      var params = objectStores[index];
      request = db.createObjectStore(params.name, params.keyPath,
                                     params.autoIncrement);
      request.onsuccess = objectStoreCreated;
    }
  }
  else {
    // User has been here before, no initialization required.
    loadData(db);
  }
};


關於Indexed的更多介紹可以參看Mozilla Blog的這篇指南。

--------
本文編譯整理自：Mark Pilgrim的Dive Into HTML5 第七章 HTML5本地存儲，編譯：@yuanyiz。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Html5離線緩存詳細講解 HTML5與PHP的比較 HTML5的LocalStorage和sessionStorage的使用 -緩存 HTML5 離線緩存管理庫 html5，單擊顯示詳細信息 HTML5中 神奇的HTML5離線存儲（應用程序緩存） Manifesto – HTML5 離線應用程序緩存校驗工具 vue日歷/日程提醒/html5本地緩存 關於HTML5本地緩存技術LocalStorage 本地存儲 和 SessionStorage
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM