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;//清除所有keystorage.clear();//清除单个keystorage.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服务器。