javascript如何操作浏览器本地存储？_javascript中Cookie和LocalStorage怎么选择？

JavaScript本地存储分Cookie、localStorage、sessionStorage：Cookie用于服务端共享小数据并支持安全策略；localStorage持久保存前端字符串数据；sessionStorage仅限当前标签页临时存储。

JavaScript 操作浏览器本地存储主要靠 Cookie、localStorage 和 sessionStorage 三种机制。它们用途不同、容量不同、生命周期也不同，选对才能避免踩坑。

Cookie：适合传给服务器的小数据

Cookie 是最早期的本地存储方式，特点是每次 HTTP 请求都会自动携带（除非设为 HttpOnly），所以它本质是“客户端与服务端共享的状态”。

• 大小限制严格：单个 Cookie 通常 ≤4KB，一个域名下总 Cookie 数量和大小都有浏览器限制
• 需要手动操作：没有原生 API，得自己封装 document.cookie 的读写逻辑（注意分号和等号格式）
• 支持过期时间、作用域（path / domain）、安全标记（Secure / HttpOnly / SameSite）
• 典型用途：用户登录态（如 session ID）、CSRF token、A/B 实验分组标识

localStorage：持久保存前端状态

localStorage 是纯前端的键值对存储，数据永久保留在浏览器中（除非手动清除或用户主动删除），且不随请求发送到服务器。

• 容量大：一般 5–10MB（各浏览器不同），远超 Cookie
• 操作简单：localStorage.setItem('key', 'value')、localStorage.getItem('key')、removeItem、clear
• 只支持字符串：存对象要先 JSON.stringify()，取出来要 JSON.parse()
• 同源限制严格：协议 + 域名 + 端口完全一致才可访问
• 典型用途：用户偏好设置（主题、语言）、表单草稿、离线缓存的静态资源元信息

sessionStorage：页面会话级临时存储

行为和 localStorage 几乎一样，但生命周期仅限当前标签页（或窗口）——关闭标签即清空，新开标签也不共享。

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

1091

查看详情

立即学习“Java免费学习笔记（深入）”；

• 适合临时中转数据：比如从列表页跳转详情页时传参，避免 URL 暴露敏感内容
• 多标签隔离：每个标签页有独立的 sessionStorage，互不影响
• 刷新页面不丢失，关掉再开就没了

Cookie 还是 localStorage？关键看这三点

不用死记硬背，按实际需求判断：

• 要不要发给后端？ 要 → 用 Cookie；不要 → 优先 localStorage 或 sessionStorage
• 数据是否敏感？ 是登录凭证、token 等 → Cookie 配合 HttpOnly + Secure + SameSite=Strict 更安全；纯前端状态（如折叠菜单）→ localStorage 更合适
• 要存多久？ 长期有效（如记住用户名）→ localStorage；本次会话即可 → sessionStorage；需服务端控制过期 → Cookie

基本上就这些。不复杂但容易忽略细节，比如忘记 JSON 序列化、混淆同源规则、或者把敏感 token 明文塞进 localStorage —— 后者其实已被不少 XSS 攻击利用过。

以上就是javascript如何操作浏览器本地存储？_javascript中Cookie和LocalStorage怎么选择？的详细内容，更多请关注php中文网其它相关文章！