聊一聊localStorage、sessionStorage和cookie

一、localStorage和sessionStorage

localStorage和sessionStorage两者的区别在于存储的有效期和作用域的不同。

1、localStorage和sessionStorage的操作

需要注意的是localStorage中仅支持存储字符串类型的数据（sessionStorage亦是如此），一般在工作中会通过JSON.stringify()方法对需要存储的数据进行序列化，在读取存储的数据时，通过JSON.parse()方法进行反序列化；

// 从localStorage或sessionStorage中查询一个已被存储的值
let userName = localStorage.userName; 
// 等价于
let userName = localStorage['userName'];
// 等价于
localStorage.getItem('userName');


// 迭代所有localStorage或sessionStorage中存储的数据
for(let key in localStorage) {
    console.log(localStorage[key]);
}


// 向localStorage或sessionStorage中存储数据
localStorage.formData = JSON.stringify(data);
localStorage.setItem('userData', 'xxxxxxxx');


// 删除localStorage或sessionStorage中的数据
localStorage.removeItem('userName'); // 从localStorage中移除userName的数据
localStorage.clear(); // 删除存储的所有数据

2、localStorage存储的有效期和作用域

通过localStorage存储的数据是永久性的，除非web应用刻意删除了存储的数据，或者用户通过浏览器配置删除，否则localStorage的数据永不过期。

localStorage的作用域是限定在文档源级别的。文档源是通过协议、主机名和端口号三者来确定的，以下示例中每个URL都拥有不同的文档源：

http://www.lcyurban.com     ———— 协议：http；主机名：www.lcyurban.com；

https://www.lcyurban.com    ———— 不同的协议

http://static.lcyurban.com  ———— 不同的主机名

http://www.lcyurban.com:8088  ———— 不同的端口号

同源的文档间共享同样的localStorage数据。它们之间可以互相读取对方的数据，甚至可以覆盖对方的数据。但是非同源之间的就不行了。

3、sessionStorage存储的有效期和作用域

通过sessionStorage存储的数据的有效期是和存储数据的脚本所在的最顶层的窗口或浏览器标签是一样的。一旦窗口关闭或者标签页被关闭了，那么所有的sessionStorage所存储的数据都会被删除。

sessionStorage的作用域也是限定在文档源中的，因此非同源文档间是无法共享sessionStorage的。而且sessionStorage的作用域还被限定在窗口中。如果同源的文档渲染在不同的标签页中，它们将各自拥有自己的sessionStorage，不会被共享，且不会相互影响。

基于窗口作用域的sessionStorage指的是顶级窗口，如果在这个标签页中还嵌套了一些