推荐使用 js-cookie 库实现 Cookie 数据持久化，它自动处理 URL 编码、JSON 序列化及作用域配置；三步即可安全存取带有效期的数据：引入库、设置含 expires/path/secure 的 Cookie、用 get 或 getJSON 读取；存储对象需序列化，注意 4KB 限制、作用域（path/domain）和安全性（secure/HttpOnly），并配套 remove 清理机制。
JavaScript 操作 Cookie 实现数据持久化，核心在于合理设置过期时间、正确编码/解码值，并选用合适工具（原生或 js-cookie 库）来规避常见陷阱。直接用 document.cookie 容易出错，推荐使用 js-cookie 这类轻量封装库——它自动处理 URL 编码、JSON 序列化、作用域配置，且压缩后仅约 2KB。
用 js-cookie 快速实现持久化
只需三步就能安全存取带有效期的数据：
- 通过 CDN 或 npm 引入库：
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3/dist/js.cookie.min.js"></script> - 登录成功后写入 token 或用户信息，指定过期天数：
Cookies.set('auth_token', 'eyJhbG...', { expires: 7, path: '/', secure: true }); - 页面加载时读取：
const token = Cookies.get('auth_token');，返回undefined表示不存在或已过期
存储复杂数据（如购物车）的要点
Cookie 只能存字符串，所以对象需序列化。js-cookie 提供了 getJSON() 和自动 JSON 处理能力：
- 存对象：
Cookies.set('cart', { items: [{ id: 1, qty: 2 }], total: 99.9 }); - 取对象：
const cart = Cookies.getJSON('cart');—— 不用手动JSON.parse() - 注意大小限制：单个 Cookie 通常 ≤ 4KB，购物车数据量大时建议只存 ID 列表，关键状态由后端补全
确保作用域和安全性
持久化不是“设了 expires 就完事”，还需明确作用范围与传输约束：
立即学习“Java免费学习笔记（深入）”；
-
path: '/'保证全站可读（默认就是/） -
domain: '.example.com'支持子域名共享（如 login.example.com 和 shop.example.com） -
secure: true强制 HTTPS 传输，防止明文泄露 - 敏感数据（如 token）不建议仅靠前端 Cookie 保护，应配合 HttpOnly + 后端校验
清理与更新机制
持久化必须配套清理逻辑，避免脏数据残留：
- 退出登录时调用
Cookies.remove('auth_token'); - 若设置了
path或domain，删除时需传相同参数，否则删不掉：Cookies.remove('cart', { path: '/' }); - 更新值直接
Cookies.set()覆盖即可，旧条目自动失效
