j*ascript如何操作浏览器本地存储？_j*ascript中Cookie和LocalStorage怎么选择？

新闻中心 NEWS CENTER

2025-12-15

浏览次数：次

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

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

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

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

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

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

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

AI Code Reviewer

AI自动审核代码

112 查看详情 AI Code Reviewer

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

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

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

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