前端localstorage使用总结

localStorage是一个属于window对象下的对象，所以访问时可以直接访问，省略window。

localStorage与sessionStorage是相同的，不同只在于存在时限，localStorage除非手动清除浏览器缓存或是前端代码执行清除操作，否则会永久保存着，而sessionStorage则只存在于当前会话里，也就是当用户关闭了当前页面，就会变清除。

localStorage相较于cookie的最大不同和好处有两点，

一是大小：localStorage的大小一般是5M，不同浏览器会存在一些差别，cookie则只有4K大小，所以localStorage可以作为本地数据库来使用。

二是性能：cookie会自带出现在每次向服务器发送的请求里，自然会造成浪费，而localStorage不会，它本质上就是一个本地存储空间，与服务器无关，也与请求无关了。

当然localStorage也有其局限，一是不支持IE7、IE6，二是隐私模式下无法访问，三是爬虫无法抓取，不利于搜索引擎优化seo。但这些都瑕不掩瑜。

localStorage的使用：

设置：localStorage['name']=value;

localStorage.addItem(key,value);

localStorage.name=value;

删除：localStorage.removeItem(key);

localStorage.clear();(请空所有localstorage);

读取值则直接是localStorage.name即可。

此处有个需要注意的是保存在localStorage里的数据会自动转化为string格式，所以平时使用如果是保存后台返回的json数据，一般会结合json.stringify()以及json.parse()方法使用。如：

localStorage.addItem(key,json.stringify(data));

var data=json.parse(localStorage.key);

另外，前端还可以监听storage的变化，能很方便的实现一些数据绑定的操作，具体实现是：

window.addEventListener('storage', function(e){

         console.log('key', e.key);

        console.log('oldValue', e.oldValue);

        console.log('newValue', e.newValue);

        console.log('url', e.url);

    })