前端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);

    })

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容