这两个是HTML5新增加的,经常用到,在这里记录一下。
这两个都是存储在客户端的,以键值对的形式存储。
两个的共同点都是存储在客户端也就是浏览器,存储的数据大小是5M。比cookie的4K大了很多。
两个的不同点是存储的时间不一样。
localStorage的生命周期可以说是永久,除了主动清除以外,是一直在客户端保存的。
sessionStorage的生命周期和当前页面有关,关闭当前页面或者是关闭浏览器,数据就被清除掉。
具体使用哪一个,看实际项目需求。
说一下具体用法。
两个的用法可以说一样,具体就是保存到本地、从本地取出来、删除存储的数据、清除全部。
具体看下面代码:
1 //localStorage的用法 2 //保存到本地,第一个参数是变量名,第二个是值 3 localStorage.setItem('name','张三'); 4 //从本地取出,只有一个参数,存储的变量名 5 localStorage.getItem('name'); 6 //删除某一个存储的数据 7 localStorage.removeItem('name'); 8 //清除所有的数据 9 localStorage.clear();
10 //sessionStorage的用法,参考localStorage的用法 11 sessionStorage.setItem('name','李四'); 12 sessionStorage.getItem('name'); 13 sessionStorage.removeItem('name'); 14 sessionStorage.clear();
第一次使用这个的可能会问怎么知道数据有没有存储到客户端,很简单,就像我们查看元素一样,localStorage和sessionStorage也可以在浏览器控制台查看,首先运行以下代码:
1 //保存到本地 2 localStorage.setItem('name','张三'); 3 4 sessionStorage.setItem('name','李四'); 5
然后就可以看到下图:
可以看到我们想要保存的数据已经存储到了本地。
上面只是简单的存储,在实际项目中可能会出现需要存储数组或者是对象,这样的情况下就不能像上面那样简单的存储,需要转换一下格式。
因为localStorage和sessionStorage是以字符串格式存储到本地的。
对于需要存储数组或者是对象,我们可以转换一下格式,如下代码:
1 //保存 2 setSession(key,value){ 3 localStorage.setItem(key,JSON.stringify(value)) 4 }; 5 //取出 6 getSession(key){ 7 return JSON.parse(localStorage.getItem(key)) 8 };
上面是localStorage用法,sessionStorage同理。
删除和清除全部还是上面代码。
完。