localStorage不能直接替换Cookie，因二者语义不同：Cookie自动随请求发送、支持服务端控制字段和HttpOnly，localStorage纯客户端、无自动传输与过期机制、存取需手动序列化且不安全。
Cookie 不适合存大量数据，localStorage 才是现代前端持久化存储的合理起点。直接替换 Cookie 为 localStorage 并不等于升级成功——得改写读写逻辑、处理过期、应对同源限制和容量边界。
为什么不能直接把 document.cookie 替换成 localStorage.setItem
两者语义完全不同：document.cookie 自动随 HTTP 请求发送，有路径、域名、过期时间等服务端控制字段；localStorage 是纯客户端键值对，无自动传输、无内置过期机制、无作用域继承。
- Cookie 的
expires或max-age在localStorage中必须手动实现（比如存一个时间戳） -
localStorage只支持字符串，存对象必须JSON.stringify，取的时候要JSON.parse - Cookie 可被后端设置为
HttpOnly防 XSS，localStorage完全暴露在 JS 环境中，敏感数据（如 token）不应存这里
如何安全迁移用户登录态这类关键数据
如果原来用 Cookie 存 auth_token，迁移到 localStorage 后，必须同步调整认证流程：
- 不再依赖浏览器自动携带凭证，每次请求需手动从
localStorage读取并设到Authorization请求头 - 登录成功后，不要只写
localStorage.setItem('token', response.token)，应一并写入过期时间：localStorage.setItem('token', JSON.stringify({ value: response.token, expires: Date.now() + 24 * 60 * 60 * 1000 })); - 读取时先校验：
const stored = localStorage.getItem('token');
if (stored) {
const { value, expires } = JSON.parse(stored);
if (Date.now() < expires) return value;
else localStorage.removeItem('token');
}
localStorage 容量超限或写入失败怎么办
多数浏览器限制为 5–10 MB，但实际可用常低于标称值（尤其存大量 Unicode 字符或嵌套深的对象）。写入失败不会抛异常，而是静默失败。
立即学习“前端免费学习笔记（深入）”；
- 写入前可先估算大小：
function storageSize(key) {
return new Blob([localStorage.getItem(key)]).size;
} - 捕获写入异常（虽然罕见）：
try {
localStorage.setItem('data', hugeString);
} catch (e) {
if (e.name === 'QuotaExceededError') console.warn('localStorage quota exceeded');
} - 避免存冗余数据：比如把整个用户 profile 对象全塞进去，不如只存 ID，其他走 API 按需拉取
真正麻烦的不是“怎么存”，而是“什么时候删”——localStorage 没有自动清理机制，用户不清除缓存，旧数据就一直占着位置，还可能和新版本结构冲突。上线前务必设计好 migration 路径，比如加个版本号字段，启动时检测并清空不兼容的旧 key。
