Cookie适合小数据且需与服务器通信的场景，容量小但可设置过期时间；Web Storage（localStorage和sessionStorage）容量更大、不自动发送至服务器，适用于前端数据持久化与临时存储。
在Web开发中，本地存储是保存用户数据的重要手段。JavaScript提供了多种方式来实现客户端的数据持久化，其中最常见的是Cookie和Web Storage（包括localStorage与sessionStorage）。它们各有特点，适用于不同场景。
Cookie：传统的小型数据存储
Cookie是一种早期的客户端存储技术，最初设计用于跟踪用户会话。它会在每次HTTP请求时自动携带到服务器，因此适合存储少量关键信息，如登录状态标识。
特点：
- 容量小，通常不超过4KB
- 可设置过期时间、作用域（domain/path）和安全标志（Secure、HttpOnly）
- 每次请求都会被发送到服务器，增加网络开销
- 可通过JavaScript操作，但语法较繁琐
基本操作示例：
立即学习“Java免费学习笔记（深入）”；
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";// 读取需解析 document.cookie 字符串
Web Storage：更现代的本地存储方案
HTML5引入了Web Storage，包含localStorage和sessionStorage，提供更简单易用的键值对存储机制。
localStorage：持久化本地存储
数据长期保存在浏览器中，除非手动清除，否则不会过期。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
使用场景： 用户偏好设置、主题选择、离线缓存等不需要传给服务器的信息。
常用方法：
- setItem(key, value)：存储数据
- getItem(key)：获取数据
- removeItem(key)：删除指定数据
- clear()：清空所有数据
let theme = localStorage.getItem("theme");
sessionStorage：会话级数据存储
仅在当前会话有效，关闭页面或浏览器后自动清除。
适用情况： 临时表单数据、跨页导航的状态保持（同一标签页内）。
sessionStorage.setItem("formTemp", "draft content");let draft = sessionStorage.getItem("formTemp");
Web Storage相比Cookie的优势在于：
- 容量更大（通常5-10MB）
- 不随请求发送，减少带宽消耗
- API简洁，易于使用
- 只能存储字符串，复杂数据需用JSON.stringify()转换
基本上就这些。选择哪种方式取决于你的具体需求：需要与服务器通信的小数据用Cookie；只需在前端保留的大一点的数据，优先考虑localStorage或sessionStorage。注意敏感信息不要明文存储，避免XSS攻击风险。
