Frontend Storage - Cookie vs LocalStorage vs SessionStorage

前端必知的存储方案：Cookie vs LocalStorage vs SessionStorage

@ Browser

前言

身在前端有几个必须知道的浏览器存储方案，重点差异在于： 容量上限、有效期限设置、是否与服务器互动 ，各自有不同的特性适合运用在不同场景。

Cookie 是最早的浏览器端储存机制，最大特点是能够在每次 HTTP 请求中自动夹带，实现用户与服务器之间的状态同步，该特性非常适合应用在登录状态的维持与服务器端辨识用户。

可以为 Cookie 设置 max-age 或 expires 来控制它的有效期限，也能设置 HttpOnly 和 Secure 等属性提升安全性。但也因为每次请求都会附带 Cookie，若滥用会影响网络效能。

浏览器 Document.cookie🔗 设置：

document.cookie = newCookie;

通过服务器 HTTP 响应头 Set-Cookie🔗 设置：

服务器浏览器服务器浏览器浏览器存储 Cookie发起初始 HTTP 请求（无 Cookie）响应 HTTP，包含 Set-Cookie 头再次发起 HTTP 请求自动附带 Cookie响应请求，可使用 Cookie 的信息

Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<number>
Set-Cookie: <cookie-name>=<cookie-value>; Partitioned
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure


Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure


// Multiple attributes are also possible, for example:
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly

LocalStorage

localStorage 不会随着请求发送至服务器，并且能永久保留数据直到被明确移除。相较于 Cookie，localStorage 容量更大，也更适合存储用户端偏好或设置档。

localStorage.setItem("name", "Joe");
localStorage.getItem("name");

SessionStorage

sessionStorage 与 localStorage 类似，但最大差别在于其生命周期仅限于当前「分页会话」。只要关闭浏览器分页，存储的内容就会清除。

sessionStorage.setItem("name", "Joe");
sessionStorage.getItem("name");

浏览器页面用户浏览器页面用户sessionStorage 是空的sessionStorage 被清除开启新分页或重新整理页面在页面上输入资料（例如表单）使用 sessionStorage.setItem() 存储资料切换到同一标签其他画面使用 sessionStorage.getItem() 获取资料关闭分页

延伸问题

字串以外的资料结构

cookie、localStorage、sessionStorage 都是以「键值对（key-value）」的形式存储，而且「值只能是字符串（string）」。若要存物件或数组，必须用 JSON.stringify() 转为字符串存储再通过 JSON.parse() 解析：

const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));


const data = JSON.parse(localStorage.getItem('user'));

如果网站面向国际用户，可以参考最严格的 GDPR（General Data Protection Regulation，欧盟通用数据保护规范）🔗

  • 适用对象 ：欧盟境内的用户，即使网站不在欧盟，只要服务欧盟用户也受限。
  • 重点规范 ：
    • 事前明确同意 ：非必要性 Cookie（如追踪、广告）不得预设启用，必须用户「主动勾选」。
    • Cookie 政策说明 ：需明确说明 Cookie 用途、存储时间、第三方共享情况。
    • 撤回权利 ：用户应能随时修改或撤回 Cookie 同意。

这也是为什么很多网站在使用 Cookie 之前会事先询问是否允许，攸关个人资料保护相关的法规。

  • Secure ：确保只有在以加密的请求通过 HTTPS 协议时，才会传送给服务器。
  • HttpOnly ：避免 JavaScript 的 Document.cookie 方法取得 HttpOnly cookies，HttpOnly cookies 只会被传送到服务器，此方法可以避免跨站脚本攻击 (XSS)。

总结

项目CookielocalStoragesessionStorage
容量上限约 4KB约 5~10 MB约 5~10 MB
有效期限可设置过期时间永久直到手动删除直到标签关闭
与服务器互动每次请求会自动送出无无
常见用途存放与服务器沟通信息（登录状态、语系偏好等登录相关资料）存放本地资料（客户端购物车清单、离线资料）存放单次标签资料（单次登录流程、表单资料临存）

延伸阅读