cookie、localStorage、sessionStorage 到底该怎么选

浏览器存东西有三套机制，名字都带 storage 或者听起来像一回事，但行为差别很大。选错了要么数据丢，要么凭空多出一堆请求头。按几个维度对比一遍就清楚了。

能存多少

cookie 大概 4KB，而且是整个域名下所有 cookie 共享这个额度，塞多了请求头会变长。

localStorage 和 sessionStorage 通常每个源 5MB 左右，具体上限看浏览器。存大对象还是容易爆，那种场景该用 IndexedDB。

什么时候失效

这是三者最不一样的地方：

• cookie 默认关掉浏览器就没了，设了 Expires 或 Max-Age 才能留存
• localStorage 一直留着，除非主动删或者用户清缓存
• sessionStorage 只在当前标签页有效，关掉标签页就清空，刷新页面还在

注意 sessionStorage 的"会话"指的是标签页，不是登录状态。用户重新开一个标签页打开同一个网站，拿到的是一份空的 sessionStorage。

会不会跟着请求发出去

cookie 会。它在同源请求的 Cookie 头里自动带上，这是它最大的特点，也是最大的代价——存的东西越多，每个请求的头越大。

另外两个完全不参与网络请求，纯本地，不会自动发给服务器。

要不要让服务端读到，是选 cookie 的唯一理由。登录态这类必须服务端校验的信息放 cookie（并且要 HttpOnly），纯前端的偏好设置、草稿、缓存放 Storage。

读写方不方便

cookie 的读写最别扭，是一整个字符串：

document.cookie = 'theme=dark; max-age=86400; path=/';

function readCookie(name) {
  const m = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
  return m ? decodeURIComponent(m[1]) : null;
}

Storage 是键值对 API，直接得多：

localStorage.setItem('theme', 'dark');
localStorage.getItem('theme');
localStorage.removeItem('theme');

但 Storage 只能存字符串，对象要自己 JSON.stringify，函数、Map 这些会丢。