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用途还有很多，这里只是一点点心得，期望有新的发现。