HTML5 Local Storage( 本地儲存) 的前世今生

原文連線：http://diveintohtml5.org/storage.html    (深入HTML5)

作者：Mark Pilgrim

譯者 : feijia ([email protected])

譯者的話：上週讀到這篇關於html5 local storage  的綜述性文章覺得十分受益。這篇文章是作者的書HTML5 up & Running的的一個章節，並在線以 CC-BY-3.0 License授權。  可以看到dojox.storage 是在HTML5標準成型前整個業界唯一提供統一的本地儲存介面的框架。 即使是在今天，為了兼顧使用者較早版本瀏覽器的相容性，dojox.storage 仍然有很大的作用. 文章較長，分兩部分翻譯。 今天是第一部分。

長久以來本地儲存能力一直是桌面應用區別於Web應用的一個主要優勢.對於桌面應用（或者原生應用)，作業系統一般都提供了一個抽象層用來幫助應用程式儲存其本地資料

例如（使用者配置資訊或者執行時狀態等). 常見的存放這些資料的方式有許多： 登錄檔，INI檔案，XML檔案等等。 除了上面這些比較簡單的用來存放 鍵值對的儲存形式，如
果你需要使用更加複雜強大的儲存，那麼你還可以進一步在應用程式中嵌入小型資料庫，或者開發出特定的資料檔案格式。

遺憾的是，上面這些本地儲存方法對Web應用來說都是不適用的。在Web的發展史上，在很長時間裡 Cookies是唯一可以使用的在使用者本地儲存少量資料的方法。 但Cookies有一些非常明顯的缺陷，限制了它的應用:

1. cookie會被附加在每個HTTP請求中，所以無形中增加了流量。

2. 由於在HTTP請求中的cookie是明文傳遞的，所以安全性成問題。 （除非你的整個應用都是使用SSL來構建的)
3. Cookie的大小限制在4 KB左右。 對於複雜的儲存需求來說是不夠用的。


對於開發者來說，他們真正需要的是

1. 不受限的儲存空間

2. 資料儲存在客戶端

3. 資料的生命週期可以跨越頁面的重新整理（甚至瀏覽器關閉重新開啟)

4. 本地資料不必每次都被重複的傳回伺服器而導致流量增加

在HTML5之前，為了達成上述目標，人們開發出了許多方法，但是總是有一些不盡人意之處。

在HTML5之前的本地儲存的簡史

在網際網路發展早期，瀏覽器市場還很單一（處在領先地位的只有Netscape瀏覽器和IE）。在

第一次瀏覽器大戰中，微軟的IE為了爭取更大的份額，它自己發明了許多額外附加的功能。 這些功能就包括動態HTML （DHTML） ， 而動態HTML中就包含了一種稱為userData的技術。


userData 允許網頁儲存最大64KB的基於XML的結構化資料（每個站點） 。獲信的站點，例如內網站點，可使用的儲存量可以增大到10倍，也即640K。 在使用userData時，IE不會彈出任何形式的對話方塊來要求使用者授權，也不允許程式增加本地儲存的容量。


在2002年，Adobe（譯者：那個時候其實應該是Macromedia) 在Flash6中引入了一個新的本地儲存功能，並命名為“Flash Cookies"。 這個名稱十分具有迷惑性，其實跟cookie沒什麼關係。 在Flash中，這個功能被稱作 Local Shared Objects 。 簡單來說，這個技術允許Flash 物件儲存100KB的資料（每個站點 ）。 基於此， Brad Neuberg 開發了一個稱為 AMASS(AJAX Massive Storage System) Ajax大容量儲存系統)的 Flash到JavaScript的橋接原型介面,允許開發者在JavaScript中呼叫LSO，但是由於Flash的種種技術侷限，這個原型並不大好用。 到2006年，隨著Flash 8 引入了ExternalInterface技術，在JavaScript中訪問LSO物件變得簡化了許多。這時Brad重寫了AMASS並把它整合到了流行的Dojo Toolkit 框架中， 並正式命名為dojox.storage。 Flash的這種技術允許每個站點儲存100KB的資料，超過100KB，則每增加超過一個數量級（如1MB， 10MB 等），它就會彈出對話方塊來要使用者確認並授權。


在2007年，Google啟動了著名的Gears專案， Gears是一個通過外掛技術來增強瀏覽器功能的開源專案。 Gears提供了一套API來訪問一個基於SQLite的嵌入式SQL資料庫， 在獲得使用者的一次性授權後，應用程式可以通過Gears儲存不限數量的本地資料。

與此同時, Brad Neuberg 和其他人繼續開發dojox.storage ， 希望能夠提供一套統一的JavaScript介面來封裝上面各種外掛和介面。 到2009年時， dojox.storage 已經可以做到自動的偵測使用者瀏覽器所支援的本地儲存技術，並提供統一的訪問介面，包括Adobe Flash, Adobe AIR, Gears 以及早期 Firefox瀏覽器所提供的HTML5 儲存功能。

從我們前面的介紹可以看到這些五花八門的技術都有一個問題，他們要麼是某個瀏覽器所特有的技術，要麼依賴於某個第三方外掛(flash或Gears). 雖然Dojox.storage非常有遠見的試圖去封裝這些區別，但是使用者仍然會因為底層技術的限制而在使用者體驗，允許儲存的資料量等方面無法統一。 這時，只有HTML5標準的出現才能徹底解決這些問題:  提供一套標準化的API, 被絕大多數瀏覽器支援，不用依賴任何第三方外掛。

HTML5 本地儲存簡介

這裡我們稱為HTML Storage的實際上是一個稱為 Web Storage  的標準， 它原來曾是HTML5標準的一部分，但由於某些政治因素，現在它被獨立出來。  某些瀏覽器廠商也稱它為 本地儲存(local storage)，或者DOM儲存 (DOM Storage)

那麼究竟什麼是HTML5本地儲存 ？ 簡單來說，它就是一種讓網頁可以把鍵值對儲存在使用者瀏覽器客戶端的方法。像Cookie一樣，這些資料不會因為你開啟新網站，重新整理頁面，乃至關閉你的瀏覽器而消失。 而與Cookie不同的時，這些資料不會每次隨著HTTP請求被髮送到伺服器端(當然如果你需要這麼做，你可以自己程式設計實現 ）. 因為這是HTML5規範的一部分，這一介面會被瀏覽器原生支援，不用依賴任何第三方外掛。

那麼，現在有哪些瀏覽器支援這一介面呢？ 在這篇文章寫作時（譯者:2011年2月） 差不多所有主流瀏覽器的最新版都支援了，連IE8都支援了。

HTML5 Storage support

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
8.0+	3.5+	4.0+	4.0+	10.5+	2.0+	2.0+

在你的JS程式碼中，你可以通過winow.localStorage 物件來訪問HTML5 本地儲存功能. 當然，考慮到瀏覽器相容性，你在使用前應該先偵測一下你的使用者的瀏覽器是否支援.

function supports_html5_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

另一種方式是使用Modernizr (譯者：一個開源的用來偵測使用者瀏覽器對HTML5支援度的工具) 來偵測

if (Modernizr.localstorage) {
  // window.localStorage is available!
} else {
  // 瀏覽器不支援HTML5 storage :(
  // 可以考慮使用dojox.storage 或其他方法
}

如何使用HTML5 儲存

HTML5 儲存是基於鍵值對的。資料儲存在一個鍵裡，訪問資料時可以根據同樣的鍵獲得上次儲存的資料. 鍵是一個字串. 而資料則可以是任何型別的JavaScript基本資料型別，包括 字串，Boolean，整數，和浮點數. 不過需要注意的是，這些資料在儲存時實際上是以字串儲存的。 因此在訪問資料時你需要利用parseInt() 或 parseFloat()方法來做資料型別的轉換。

interface Storage {
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any data);
};

如果在呼叫setItem 時使用一個已經存在的鍵，將會直接覆蓋掉該鍵上儲存的值。而呼叫getItem時傳入一個不存在的鍵，則會返回一個null ，不會丟擲異常。

就像其他JavaScript物件一樣，你也可以將localStorage物件當成是關聯陣列使用(associative map)

除了使用getItem和setItem之外，你可以使用中括號的方式來引用資料. 例如

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
//和下面程式碼是等價的：
var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;

該介面還提供了方法來刪除某個鍵和清空整個儲存區域(刪除所有的鍵和值)

interface Storage {
  deleter void removeItem(in DOMString key);
  void clear();
};

如果removeItem傳入一個不存在的key則無操作，也不會有異常。


最後，還提供了一個length屬性來指示儲存區域中所包含的所有鍵值對的數量 以及遍歷所有鍵的key方法

interface Storage {
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
};

如果你向key方法傳入了一個越界的值（不在0到length-1 之間），則該方法返回null。

翻譯的第二部分已經發布：