本文介绍 Cookie、SessionStorage、LocalStorage 三种前端存储方案的区别。
Cookie 是传统的前端（浏览器 / Web 客户端）存储方案，用于解决 HTTP 协议无状态性，通常用于保存用户登录状态、行为信息等数据。但 Cookie 大小限制为 4KB 左右，且存储格式为字符串导致解析起来很复杂，而且每次发送请求都会带上 Cookie 从而造成了一定的流量消耗。为了解决 Cookie 的这些缺陷，HTML5 规范提出了新的前端存储解决方案：SessionStorage 和 LocalStorage。
| 特性 | Cookie | SessionStorage | LocalStorage |
|---|---|---|---|
| 数据生命周期 | 一般由服务器设置，可附带失效时间；如果是在浏览器中生成则关闭浏览器后立即失效。 | 当前会话中有效，关闭浏览器窗口后被清除 | 永久保存，需要手动清除 |
| 大小限制 | 4KB |
5MB |
20MB |
| 与服务器的通信 | 每个 HTTP Request Header 中都会携带 | 仅在客户端保存，不参与和服务器间的通信 | 仅在客户端保存，不参与和服务器间的通信 |
| 作用域 | 在所有同源窗口中可共享 | 不能在不同的浏览器窗口中共享，即使是同一页面 | 在所有同源窗口中可共享 |
网友评论