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