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用途還有很多,這裏只是一點點心得,期望有新的發現。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章