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 几乎一样，但生命周期仅限当前标签页（或窗口）——关闭标签即清空，新开标签也不共享。

标签： javascript java js 前端 json cookie 浏览器 端口 session 后端 ai 作用域 键