html5的localStorage浏览器存储总结

1. 什么是localStorage？

1、localStorage 是HTML5中新加入的功能，主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小。
2、localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

2. localStorage的优缺点

localStorage的优点：

    1、localStorage拓展了cookie的4K限制
    2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
    3、localStorage能长期存储数据，只有通过人工或代码删除数据才会清除，否则就一直存在。

localStorage的缺点：

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到

3、localStorage的使用场景及方法

1、3种方法读取localStorage：

  var storage=window.localStorage;
  var domain = {
         id   : 1, 
        count : 1
    };

  //写入domain字段,存储对象时需要转换成JSON字符串形式
  storage.setItem("domain",JSON.stringify(domain));

  //读取字段的三种方法
  var value= storage.getItem("domain");
  value= storage["domain"];
  value= storage.domain;

  //读取后需要使用JSON.parse()方法，转换成JSON对象
  domain = JSON.parse(value);
  alert(domain.count);

2、清除localStorage

var storage=window.localStorage;
//清除所有key
storage.clear();
//清除单个key
storage.removeItem("domain");

3、localStorage的大小限制：

由于浏览器的window.localStorage大小限制在5M左右，在超过存储限制时会抛出异常,因此最好在写入键值时获取异常,清空后重新写入localStorage：

try{
    var storage=window.localStorage;
    domain = JSON.stringify(domain);
    storage.setItem("domain",domain);
}catch(e){
    storage.clear();
    //清除之后再次写入
    storage.setItem("domain",domain);
}

4、localStorage的正确存取形式：

//setItem前，需要将对象转换成JSON字符串形式
domain = JSON.stringify(domain);
storage.setItem("domain",domain);

//getItem后，需要将JSON字符串转换成JSON对象形式，才能进行后续操作
domain = JSON.parse(storage.getItem("domain"));
alert(domain.count);

4、结语

localStorage是一种很好的本地浏览器存储方式，本人的场景需求是统计商品详情页的访问次数，因为是针对浏览器级别的统计，所以利用localStorage存储商品的SPU和访问次数，最终将对应的访问次数推送到远程appboy服务器。