：localStorage和sessionStorage使用方法及应用场景说明

这两个是HTML5新增加的，经常用到，在这里记录一下。

两个的共同点都是存储在客户端也就是浏览器，存储的数据大小是5M，比cookie的4K大了很多。

1、生命周期：

　　localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

　　　　作用域：相同浏览器的不同标签在同源情况下可以共享localStorage

　　sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

　　　　作用域：只在当前标签可用，当前标签的iframe中且同源可以共享

2、存储大小：

　　localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：

　　localStorage和sessionStorage都保存在客户端，以键值对的形式存储，不与服务器进行交互通信。

4、存储内容类型：

　　localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAscript提供的JSON对象的stringify和parse来处理

5、获取方式：

　　localStorage：window.localStorage;；

　　sessionStorage：window.sessionStorage;。

6、应用场景：

　　localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。

　　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','李四');

然后就可以看到下图：

可以看到我们想要保存的数据已经存储到了本地。 

上面只是简单的存储，在实际项目中可能会出现需要存储数组或者是对象，这样的情况下就不能像上面那样简单的存储，需要转换一下格式。

因为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同理。

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

特别要注意：

setStorage是存储数据的，key是指定的数据名称，可以随意起，但是一定要是字符串类型，否则浏览器自动把值作为key的名字。

如上图第一个值，就是key不是以字符串指定的，即没有加双引号。value值字符串类型的也切记加双引号。