localStorage接口的使用心得

現在在移動端上的需求趨勢是越來越多，是以在PC端上不是那麼好派上場的功能接口，在移動端上是可以盡情地發揮了。這裡分享一下localStorage接口的使用心得。

一、localStorage相容性

兩大平台的系統版本：Android from 2.0 on，Safari from 3.x on（限于裝置條件不足，沒有新身驗證，從以下資料也可以放心使用）。對于大部分移動端使用者來說已經在比對範圍内，若需求相容很低的版本的浏覽器或系統，可以通過以Cookie來實作相容（但如果是存儲比較多的資料，則不建議通過該相容方案來實作，而是直接忽略，原因見後）。

iOS 1.0的safari版本就已經是3.0，是以在封閉的IOS系統中是可以放心使用。

WindowPhone平台暫沒資料。

二、localStorage接口

interface Storage {                  readonly attribute unsigned long length;                  [IndexGetter] DOMString key(              in              unsigned long index);                  [NameGetter] DOMString getItem(              in              DOMString key);                  [NameSetter] void setItem(              in              DOMString key,               in              DOMString data);                  [NameDeleter] void removeItem(              in              DOMString key);                  void clear();              };           

由此可見，localStorage接口定義都非常簡單，一目了然。（當然了，如果要深入研究的話，還可以繼續研究各個浏覽器實作該對象的方法，例如在chrome背後是以sqlite檔案來存放，但可以用sql語句來操作了）。

當然了，除了可以使用上面定義的方法，還可以對localStorage對象直接進行操作。如讀取key為 'key1'的值可以用 localStorage.key1，删除可以用delete localStorage.key1。

三、localStorage擁有的事件名為storage

window.addEventListener(              'storage'              ,              function              (e){},              false              );              jQuery(window).on(              'storage'              ,              function              (e){});           

如 上面用法，在進行setItem,removeItem,clear操作時，都會觸發該事件，但不同浏覽器對該事件的觸發條件不一樣，如在chrome和 firefox中不同頁面之間才會觸發該事件，而在同一頁面，不管進行多少次操作，都不會觸發本頁綁定的storage事件，包括safari，移動端的 浏覽器同理（注：IE浏覽器下并沒有該問題）。

四、在這裡順便對比一下與cookies的明顯不同點

第一：locaStorage儲存的内容不會被發送到伺服器；

第二：獨立域包括子域都是獨立儲存互不幹擾，無法跨（子）域共享，每個儲存空間官配是5M；

第三：儲存内容永不過期，送閉浏覽器（webview）也不會自動清理。

五、使用場景

在實際應用中，永久儲存很可能并不是你想要的，那麼，背景資料更新了怎麼去更新其中的内容呢？這裡，我分享幾種使用場景：

第一：實時更新，要求資料要非常及時準确地呈現在使用者面前。

這 種需求要求頁面在進行渲染前已經擷取到最新的緩存ID，解決方案可以在服務端下發一個緩存ID或外部傳入緩存ID參數給頁面去判斷背景資料是否有更新了。 例如拿會員中心來說，首頁是php吐出的，每一次服務端都會去讀取緩存ID，然後将緩存ID直接附加子頁面連接配接的參數上面，這樣每打開一個子頁面都可以知 道目前的緩存ID是不是最新的，若不是最新的說明需求向服務端拉取新資料。

第二：實時更新，但允許第二次通路時更新資料。

這種使用場景是頁面渲染前不需要從服務端擷取最新資料，也沒法從其他外部管道來通知資料已更新，這樣隻能靠頁面自身來處理了。可以在頁面初始化後空閑時間段異步向服務端讀取最新的緩存，然後儲存的本地，當第二次通路時即可以直接使用。

第二：讓儲存在本地的緩存自動過期。

這種使用對類似于Cookie有一個過期日期，即若緩存的資料過期，就從伺服器拉取資料，不管有沒有更新，然後再儲存到本地，這個場景在手Q個性簽到-rich态-愛玩遊戲頁面上使用，具體的實作可以參考如下：

cache :{                  set :               function              (key,data,expires){                  if              (window.localStorage){                  var              exp =               '['              +(+              new              Date)+              ':'              + (expires||0)               ']'              ,                      data =                typeof              data ==               'object'              ? (window.JSON ?                   JSON.stringify(data) :              ''              ) : data;                  localStorage.setItem(key, exp + data);                  }                  },                      get :               function              (key, json){                  if              (window.localStorage){                  var              data = localStorage.getItem(key);                  if              (!data)               return              ;                  if              (!(data = data.match(/^\[(\d+):(\d+)\](.*)/)))               return              ;                  if              (data[1] && (+              new              Date()) - data[1] <= data[1])               return              ;                  return              json && window.JSON ? JSON.parse(data[2]) : data[2];                  }              }              }           

當然，localStorage用途還有很多，這裡隻是一點點心得，期望有新的發現。