JS-一文搞懂 Cookie、LocalStorage 与 SessionStorage在 Web 开发中，如何在浏览器

前言

在 Web 开发中，如何在浏览器端持久化数据是一个核心命题。从最早的 Cookie 到 HTML5 推出的 Web Storage，不同的存储方式各有千秋。本文将带你深度剖析它们的底层原理、字段属性及实战应用场景。

一、 Cookie：身份标识的基石

Cookie 是由服务端生成、客户端维护的小型文本文件。它最显著的特点是：会自动随 HTTP 请求在浏览器和服务器之间传递。

1. 核心属性详解

Cookie 不仅仅是键值对，其背后的属性决定了它的安全性和作用域：

属性	作用	深度解析
Domain/Path	作用域限制	决定了哪些 URL 可以访问该 Cookie。
Expires/Max-Age	有效期	`Max-Age` 优先级高于 `Expires`，设置为 0 或负数可立即删除。
HttpOnly	安全防护	必记！禁止 JS 访问，是防御 XSS 攻击劫持 Cookie 的核心手段。
Secure	加密传输	强制该 Cookie 仅在 HTTPS 协议下发送。
SameSite	跨站策略	`Strict`(严谨)、`Lax`(默认，折中)、`None`(无限制)。防止 CSRF 攻击的关键。

2. Cookie 的局限性

体积小：上限约 4KB。
性能损耗：所有请求都会携带。若 Cookie 过多，会显著增加 HTTP 头部大小。
安全性：原生 HTTP 传输为明文，易被监听。

二、 Web Storage：本地存储的双子星

HTML5 引入了 localStorage 和 sessionStorage，它们的数据不会随请求发送给服务器，且存储空间远大于 Cookie（通常为 5MB）。

1. localStorage（持久化存储）

生命周期：除非手动删除（代码删除或清除浏览器缓存），否则永久有效。
应用场景：存储用户偏好设置（皮肤模式）、不常变动的业务数据。

2. sessionStorage（会话级存储）

生命周期：仅在当前标签页有效。关闭标签页或浏览器窗口即被清除。
注意点：在同一个浏览器中打开两个相同的 URL，它们的 sessionStorage 是不互通的。
应用场景：单次表单填写过程中的数据暂存。
使用方法：（sessionStorage和localStorage方法一样）
- setItem：添加键值对
- getItem：获取键值对
- removeItem（key）：删除键值对
- clear：清楚所有键值对

三、三者对比一览表

特性	Cookie	localStorage	sessionStorage
数据生命周期	一般由服务器生成，可设置过期时间	永久保存，除非手动清理	页面关闭即失效
存储大小	4KB	5MB - 10MB	5MB - 10MB
与服务端通信	每次请求都会携带	不参与通信	不参与通信
访问权限	任意窗口	同源窗口（同域名、协议、端口）	仅限当前标签页

四、实战代码与注意事项

1. 操作 API

// --- Cookie 操作 ---
// 设置 Cookie（推荐手动进行 encodeURIComponent 编码）
document.cookie = "user=Gemini; path=/; max-age=3600; Secure; HttpOnly";

// --- Web Storage 操作 ---
const storage = localStorage; // 或 sessionStorage
storage.setItem('theme', 'dark');      // 存
console.log(storage.getItem('theme')); // 取
storage.removeItem('theme');           // 删单个
storage.clear();                       // 全清

2. 重要提醒

存储溢出：当存储空间满时，setItem 会抛出 QuotaExceededError 异常，建议在生产环境中包裹 try...catch。
类型限制：Web Storage 只能存储字符串。存入对象前需用 JSON.stringify()，取出后用 JSON.parse()。
隐私模式：部分浏览器在隐身模式下会限制 localStorage 的写入，需做好兼容降级。

JS-一文搞懂 Cookie、LocalStorage 与 SessionStorage

前言