localStorage和sessionStorage

这两个是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同理。

删除和清除全部还是上面代码。

完。

 

转载于:https://www.cnblogs.com/alongago/p/11131549.html