localStorage和sessionStorage

wade

发布于 2020-04-24 17:23:16

1.2K0

在以前，想要存储数据在本地中只有cookie，而cookie又被限制了大小，在不同浏览器只能存储4k左右的cookie。于是H5新增了本地存储localStorage，在不同浏览器可以存储5M左右。

sessionStorage和localStorage的区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。且localStorage和sessionStorage都属于window的方法。

sessionStorage：

页面必须在同一协议、同一主机名和同一端口下才能共享sessionStorage。页面关闭之后就会清空。

存：

sessionStorage.setItem('key','value');

取：

sessionStorage.getItem('key')

重新赋值：

sessionStorage.setItem('key','update value');

清除：

sessionStorage.removeItem('key');

清除全部：

sessionStorage.clear();

遍历所有：

for(var i=0;i<sessionStorage.length;i++){    alert(sessionStorage.key(i));    alert(sessionStorage[sessionStorage.key(i)]);}
localStorage：

本地缓存，关闭浏览器之后再次打开还能获取，不过存储内容过多页面性能会有影响。

存：

localStorage.setItem('key','value');

取：

localStorage.getItem('key')

重新赋值：

localStorage.setItem('key','update value');

清除：

localStorage.removeItem('key');

清除全部：

localStorage.clear();

遍历所有：

for(var i=0;i< localStorage.length;i++){    alert(localStorage.key(i));    alert(localStorage [localStorage.key(i)]);}

wade-tools npm包多封装了时间戳转换和这个localstorage的方法。

地址：

https://www.npmjs.com/package/wade-tools

如果有需要的可以说一下想要封装的小函数，力所能及的一定封装。

（完）

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-12-18，如有侵权请联系 cloudcommunity@tencent.com 删除