一、概念介绍

cookie是在HTML4中使用的给客户端保存数据的，也可以和session配合实现跟踪浏览器用户身份；而webstorage（包括：localStorage和sessionStorage）是在HTML5提出来的，纯粹为了保存数据，不会与服务器端通信。

WebStorage两个主要目标：

1. 提供一种在cookie之外存储会话数据的路径
2. 提供一种存储大量可以跨会话存在的数据的机制

二、cookie 的特点

1. 只能使用文本文件
2. 文件有大小限制4K左右
3. 不可跨域
4. 时效限制（默认会话级，可指定)
5. 每次都会随着请求，发往服务器
6. 完全兼容

三、localStorage 的特点

1. 只能使用文本文件
2. 文件有大小5M左右
3. 不可跨域
4. localStorage没有过期时间；sessionStorage只能会话级
5. 不会发往服务器
6. 低版本浏览器不兼容

不安全、不能跨域、不能跨浏览器,写入的都是字符

四、相同点

cookie，localStorage，sessionStorage都是在客户端保存数据的，存储数据的类型都是字符串，都不安全、不能跨域、不能跨浏览器。

五、不同点：

1. 有效期：

• cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失。
• localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
• sessionStorage仅在当前会话下有效。
  • sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
  • 可以简单的理解为：sessionStorage就是没有设置有效期的cookie。
  • 如果说把cookie的有效期设置为永久（当然没有永久的事件），那么就是localStorage。

2. 网络流量

cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，所以，storage更加节约网络流量。

3. 大小限制

cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M

4. 安全性

WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。

5. 便携性

cookie只提供了一个属性可供操作；而storage提供了一系列的API，操作方便快捷

六、语法

1. cookie

// 设置
let d = new Date();
d.setDate(d.getDate()+3);
document.cookie = `${key}=${value};expires=${d};path=/;domain=localhost`;

// 获取，只能获取所有，需要配合字符串处理，才能拿到指定cookie
console.log(document.cookie)

// 删除，将有效期expires设置为过去的日期对象
let d = new Date();
d.setDate(d.getDate()-1);
document.cookie = `${key}=${value};expires=${d};path=/;domain=localhost`;

2. storage

localstorage和sessionStorage的操作API一致，此处以localstorage举例

localstorage.setItem(key, value);  // 保存数据，以键值对的方式储存信息。
localstorage.getItem(key);         // 获取数据，将键值传入，即可获取到对应的value值。
localstorage.removeItem(key);      // 删除单个数据，根据键值移除对应的信息。
localstorage.clear();              // 删除所有的数据，不推荐使用
localstorage.key;                  // 获取指定key的value

---

以上，如有纰漏或不同观点，欢迎留言讨论...