localStorage和sessionStorage用法相同但生命周期不同：前者持久存储，后者仅限当前tab；cookie是HTTP头机制，随请求自动发送；IndexedDB支持结构化大数据；Cache API专用于Service Worker离线缓存。
localStorage 和 sessionStorage 用法几乎一样，但生命周期不同
两者都提供 setItem()、getItem()、removeItem()、clear() 四个核心方法，API 完全一致。关键区别在存储时长：localStorage 持久保存（除非手动清除或用户清缓存），sessionStorage 仅限当前 tab 生命周期——关闭 tab 后自动清空，即使刷新页面也保留。
常见误用是把临时 token 存 localStorage，结果用户关掉页面再打开还能“自动登录”，这既不安全也不符合会话语义。需要会话级隔离时，必须选 sessionStorage。
localStorage.setItem('user', JSON.stringify({id: 123}))const user = JSON.parse(localStorage.getItem('user'))- 不能直接存对象或数组，必须先
JSON.stringify()；读取后要JSON.parse()，否则得到字符串 - 超出 5MB（多数浏览器）会抛
QuotaExceededError，不是静默失败
cookie 不是“浏览器存储 API”，而是 HTTP 协议头机制
它和 localStorage 完全不是一类东西：cookie 会随每个同源请求自动带上，影响网络开销；而 localStorage 是纯前端读写，不参与网络传输。
操作 cookie 要靠 document.cookie 字符串拼接，没有原生的 set/get 方法，极易出错。比如设置带 HttpOnly 的 cookie，JS 根本读不到；设了 Secure 却在 http 环境下，写入就失效。
立即学习“Java免费学习笔记（深入）”；
document.cookie = "token=abc123; path=/; max-age=3600; secure; SameSite=Lax"- 读取时得自己解析字符串，
document.cookie返回的是所有未被标记HttpOnly的键值对拼接，格式如"a=1; b=2; c=3" - 不支持嵌套结构，不能存对象，长度上限约 4KB（含键名、等号、分号）
IndexedDB 是唯一支持大量结构化数据的异步方案
当你要存图片 blob、离线日志、用户编辑的富文本快照，或者需要索引、事务、游标遍历——localStorage 就撑不住了。IndexedDB 是浏览器内建的 NoSQL 数据库，但 API 设计偏底层，容易卡在打开数据库、创建 objectStore、处理事件流这些环节。
最常踩的坑是忽略版本升级：第一次建库用 open('db', 1)，后面加字段必须升到 v2 并在 onupgradeneeded 里重建 objectStore，否则旧数据不可读。
- 必须用
indexedDB.open()异步打开，不能直接 new - 写入前要先开启
transaction，指定readwrite模式 - 所有操作基于事件（
onsuccess/onerror），现代代码建议用idb这类 Promise 封装库简化
const request = indexedDB.open('notes', 1);
request.onupgradeneeded = event => {
const db = event.target.result;
if (!db.objectStoreNames.contains('items')) {
db.createObjectStore('items', { keyPath: 'id' });
}
};
Cache API 专用于 Service Worker 离线资源控制
它不是用来存业务数据的，而是配合 Service Worker 缓存 HTML/CSS/JS/图片等静态资源，实现 PWA 离线可用。你无法在普通页面脚本中直接调用 cache.put()，必须在 SW 的 install 或 fetch 事件里使用。
混淆点在于名字叫 “Cache”，但它和 localStorage 隔离，不共享空间，也不受用户“清除浏览数据”里的“Cookie 及其他网站数据”选项影响——它归在“缓存的图像和文件”里，单独管理。
- 必须先
self.caches.open('v1')才能写入 - 只能存
Request/Response对象，不能存字符串或 JSON - 不支持按 key 查询，只能用
keys()列出全部 cache 名，或用match()匹配 URL
localStorage）、要不要结构化查询或超大体积（IndexedDB）、要不要控制网络资源缓存（Cache API）。混用时尤其注意作用域和清理时机——比如登出时只清 localStorage，却忘了 sessionStorage 里还有临时草稿，下次进页面就断连。 
