localStorage、sessionStorage、cookie的区别、用法及使用场景

参考文章：https://segmentfault.com/a/1190000004556040

                  https://segmentfault.com/a/1190000012057010#articleHeader0

webStorage是本地存储，存储在客户端，包括localStorage和sessionStorage。

localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信。原生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

localStorage和sessionStorage用法

localStorage和sessionStorage用法相同：

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

localStorage.getItem('key')

localStorage.removeItem('key')

localStorage.clear()

localStorage和sessionStorage使用场景

localStorage：

1. 表单页返回后将填写信息存为草稿，下一次进入是选择是否加载草稿
2. 搜索条件存为搜索历史
3. 相同浏览器的不同页面间传值

sessionStorage：

1. 统计当前页面元素的点击次数
2. 单页面应用路由之间传值

localStorage和sessionStorage作用域不同

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

 

cookie

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。存放数据大小为4k左右。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。

存储cookie是浏览器提供的功能。cookie其实是存储在浏览器中的纯文本，浏览器的安装目录下会专门有一个cookie文件夹来存放各个域下设置的cookie。

当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次htpp请求浏览器都会自动帮我们做。

客户端设置cookie

document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/"

修改cookie

要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意，在设置新cookie时，path/domain这几个选项一定要和旧cookie保持一致。否则不会修改旧值。

删除cookie

删除一个cookie也挺简单，也是重新赋值，只要将这个新的cookie的exprise选项设置为一个过去的时间点就行了。同样要注意，path/domain这几个选项一定要和旧cookie保持一致。

cookie使用场景

存储在cookie中的数据，每次都被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，就会增加网络开销。对于设置 “每次请求都要携带的信息（例如身份认证信息）” 就特别适合放在cookie中。