javascript如何操作浏览器存储_有哪些方式呢

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

真正决定用哪种方式，得看三个硬条件：数据要不要发给服务器（选 cookie）、要不要跨页面共享且持久（localStorage）、要不要结构化查询或超大体积（IndexedDB）、要不要控制网络资源缓存（Cache API）。混用时尤其注意作用域和清理时机——比如登出时只清 localStorage，却忘了 sessionStorage 里还有临时草稿，下次进页面就断连。