html5的离线存储的研究（2）——localStorage

上次研究了下appcache，很不幸，W3C准备将它废弃了，我也觉得，刚开始研究这个的时候，感觉有点烦，而且不自由。在知乎上看到贺老的一句话

App cache 有许多设计缺陷，基本上是一个失败的 API。比如，标记了 manifest 的 html 本身也被缓存，而且无法清除。除非是类似游戏这样的场景，否则不推荐使用。
嗯，就是如此了......

这次也算不上研究，整理一下自己以前用的localStorage、sessionStorage和cookie，前两个是html5新增的api，后一个则是传统的缓存技术，鉴于cookie的缺点，最大容量只支持4k，cookie基本在我现如今的业务环境中，好像没怎么用到......

localStorage

扩展了cookie，4k的限制，简单地说是对cookie的优化。相对于cookie，它有以下优点：

• 不会随着HTTP传输 ( cookie会随着http传输，浪费带宽 )
• 隐私模式下无法访问......
• 不能被爬虫爬取
• 大小限制在500万字符左右
  使用方法的话，主要集中在增删改查.....

// 返回一个key为token的string值
window.localStorage.getItem('token')

//新增一个值为asdasdas的token
window.localStorage.setItem('token', 'asdasdas')

//删除特定的值
window.localStorage.removeItem('token')

//删除全部
window.localStorage.clear()

使用心得

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式，这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
// 读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法
var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

注意

localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage，之前在做微信公众号平台的时候，在查看不同域的页面的缓存，localStorage一直为undefined........