浏览器存储之 cookie、sessionStorage、localStorage 与 IndexedDB

Question

打开 Chrome 浏览器，按 F12 或鼠标右键审查元素，然后在面板里找到 Application 栏，如下：

上面所示的就是客户端数据的几种存储方式，分别是：

• cookie
• sessionStorage
• localStorage
• IndexedDB

cookie

在了解 cookie 之前，先要知道为什么需要 cookie。这就要从 http 说起，http 是一个 无状态 协议，这意味着客户端每次发送 http 请求，服务器是无法记住身份状态的。这带来的问题是，你作为一个用户登录某个网站，你肯定是希望登录一次后，短时间内可以直接使用网站而不用二次登录，但是由于 http 无状态的特点，无法实现你这个需求。可能你刚登录完某个网站，过了一会再打开，又要求你再次登录，毫无疑问，这样的用户体验是不行的。

于是 cookie 就出现了，那 cookie 是什么呢？简单的说，cookie 是一个状态标识，它由服务器下发给浏览器，然后浏览器将它存储起来，这样下次再访问某个资源的时候，只需要携带这个 cookie 标识，服务器就可以识别出你是谁，然后返回你的一些相关信息给客户端使用。

cookie 有如下几个特点：

• 大小只有 4k
• 可以由服务端和 JS 读写（如果设置了 httpOnly 属性，则禁止 JS 读写）
• 通常出现在 http 请求头里，随着请求一同发送给服务器，正因如此，cookie 如果太大，会影响传输性能
• 可以设置过期时间，通过 Expires 和 Max-Age 这两个属性设置，如果设置为负数或 0，则浏览器关闭后直接被销毁
• 可以在同个域名下的 http 和 https 之间共享（如果设置了 secure 属性，则只能在 https 中携带）
• 对 cookie 设置 SameSite 属性值，可以限制其在跨域请求中携带，减少 CSRF 攻击

实际应用中，由于 cookie 的大小限制，传输性能等因素，已经越来越不推荐使用 cookie 了。一般存储更加推荐使用的是 sessionStorage 和 localStorage，而用户登录状态标识可以使用 session 。session 使用 cookie 作为 key ，与用户数据进行关联，来作为状态标识，通常是由服务器管理。

cookie vs session

• 从存储位置看，cookie 保存在客户端，而 session 保存在服务端的数据库上
• 从有效期看，cookie 可以由用户设置过期时间，而 session 则是用户关闭浏览器或登出就被销毁
• 从存储内容看，cookie 存储的信息受限，大小只有 4 kb；而 session 可以存储任意信息，没有大小限制
• 从安全性看，cookie 存储的是明文的文本信息，容易泄露；而 session 是加密存储信息，更安全

sessionStorage

sessionStorage 是一个存储对象，它有几个 api 可以调用，使用上比 cookie 更灵活。存储的是会话级别的数据，这意味着浏览器或标签 tab 页关闭后，数据就没了，适合存储一些只在会话期间短暂生效的数据。它的特点如下：

• 大小取决于浏览器，大多数浏览器都对同个源限制 5MB ，相比 cookie 可以存更多数据，并且它不会随着 http 请求一起发送
• 页面标签或浏览器关闭，数据就被销毁
• setItem(key, value) API 可以设置对应键值的缓存
• getItem(key) API 可以获取对应键的缓存
• removeItem(key) API 可以移除某个键值的缓存
• clear() API 可以清除所有 sessionStorage 缓存

sessionStorage 的应用：存储分页数据

localStorage

相比 sessionStorage，localStorage 存储的数据 生命周期更长 ，除非用户主动清除缓存或通过 JavaScript 删除，否则即使关闭窗口、标签页和浏览器，localStorage 的数据也一直在。它的特点如下：

• 大小取决于浏览器，大多数浏览器都对同个源限制 5MB
• 与 sessionStorage 一样，拥有 setItem 、 getItem 、 removeItem 和 clear API，因为它们都继承自 Storage 对象。
• 除非主动删除，否则数据可以一直存储在浏览器里

sessionStorage 和 localStorage 的任何更改，都会触发 storage 事件，可以通过 window.addEventListener("storage", handler) 来监听存储变化。

IndexedDB

这类存储很少用到，它是浏览器存储结构化数据的一个方案。类似 SQL 那样操作数据库，它有如下特点：

• API 都被设计成异步的，使用 JavaScript 来操作，避免阻塞应用程序
• 可以存储结构化克隆算法支持的任何对象
• 数据存储是与页面域名、协议和端口绑定的，不能够跨域共享
• 支持事务操作