JavaScript本地存储主要用localStorage和sessionStorage，均以键值对存字符串数据；localStorage持久保存，sessionStorage仅限当前标签页；二者均受同源策略限制、不支持直接存对象、无自动过期机制。
JavaScript 本地存储主要有两种 Web API：localStorage 和 sessionStorage，它们都以键值对（key-value）形式在浏览器中保存字符串数据，无需后端参与，适合存少量结构化信息（如用户偏好、表单草稿、登录状态标识等）。
localStorage 的特点与用法
localStorage 数据持久保存，关闭浏览器甚至重启电脑后依然存在，除非手动清除或代码删除。每个域名（协议+域名+端口）有独立的存储空间，通常限制为 5–10MB（因浏览器而异）。
- 写入数据：
localStorage.setItem('theme', 'dark') - 读取数据：
localStorage.getItem('theme')→ 返回"dark"（注意：始终返回字符串） - 删除单个：
localStorage.removeItem('theme') - 清空全部：
localStorage.clear() - 查看所有键：
Object.keys(localStorage)或遍历localStorage.key(i)
⚠️ 注意：不能直接存对象或数组。需用 JSON.stringify() 转换，读取时用 JSON.parse() 还原：
localStorage.setItem('user', JSON.stringify({name: 'Alice', age: 28}));
const user = JSON.parse(localStorage.getItem('user')); // {name: 'Alice', age: 28}
sessionStorage 的特点与用法
sessionStorage 数据仅在当前浏览器标签页（tab）生命周期内有效。关闭该标签页后数据自动销毁，新开同域名标签页也是独立的。适用场景包括：临时表单缓存、单页流程中的中间状态、防重复提交令牌等。
立即学习“Java免费学习笔记（深入）”；
- 用法和 localStorage 完全一致：
sessionStorage.setItem()、getItem()、removeItem()、clear() - 不同标签页之间互不共享，即使同一网址也隔离
- 页面刷新不会丢失数据，只有关闭标签页才清除
localStorage 和 sessionStorage 的共同限制
两者都受同源策略约束（即只能被同协议、同域名、同端口的脚本访问），且无法跨 iframe 共享（除非满足特定跨域通信条件）。它们不加密、不安全，绝不能存放密码、token、银行卡号等敏感信息。
- 只支持字符串值，存对象/数组必须序列化
- 无过期机制，需自行管理有效期（例如存时间戳判断是否过期）
- 频繁读写可能触发性能瓶颈，大量数据建议用 IndexedDB
- 私密模式下部分浏览器会禁用或清空（如 Safari 无痕窗口默认禁用 localStorage）
简单封装提升实用性
可封装一个带过期时间、自动序列化的工具函数，避免每次手动处理：
const storage = {
set(key, value, expiresMs = null) {
const item = {
value: JSON.stringify(value),
expires: expiresMs ? Date.now() + expiresMs : null
};
localStorage.setItem(key, JSON.stringify(item));
},
get(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;
const item = JSON.parse(itemStr);
if (item.expires && Date.now() > item.expires) {
localStorage.removeItem(key);
return null;
}
return JSON.parse(item.value);
}
};
<p>// 使用示例
storage.set('cart', [{id: 1, qty: 2}], 1000 <em> 60 </em> 60); // 1小时后过期
console.log(storage.get('cart')); // 自动解析为数组
