localStorage和sessionStorage是浏览器提供的键值对存储机制,前者长期有效,后者仅限当前标签页;均需用JSON.stringify/parse处理对象,且须try-catch应对容量超限或禁用情况。

localStorage 和 sessionStorage 是浏览器提供的两种客户端存储机制,都以键值对(字符串)形式保存数据,操作简单、无需后端参与,适合存用户偏好、临时状态等轻量信息。
基本用法:增删查改四步到位
两者 API 完全一致,核心方法就四个:
-
设置值:
localStorage.setItem('key', 'value')或sessionStorage.setItem('key', 'value') -
读取值:
localStorage.getItem('key')返回字符串,不存在时返回null -
删除单个:
localStorage.removeItem('key') -
清空全部:
localStorage.clear()(慎用)
关键区别:生命周期和作用域
localStorage 数据长期存在,关闭标签页、重启浏览器都不丢失,除非手动清除或代码调用 clear();sessionStorage 只在当前标签页(tab)生命周期内有效,关闭该 tab 就自动清空,新开同地址的 tab 也是独立的。
两者都遵循同源策略:只有协议、域名、端口完全相同,才能互相访问数据。
立即学习“Java免费学习笔记(深入)”;
存对象?记得先转成 JSON 字符串
它们只能存字符串,直接存对象会变成 [object Object]:
- ✅ 正确写法:
localStorage.setItem('user', JSON.stringify({name: '张三', age: 25})) - ✅ 读取还原:
JSON.parse(localStorage.getItem('user')) - ❌ 错误写法:
localStorage.setItem('user', {name: '张三'})(存进去的是字符串[object Object])
注意异常:超出容量或禁用时要兜底
大多数浏览器限制约 5–10MB,超限会抛出 QuotaExceededError;用户也可能禁用存储。建议加 try-catch:
try {
localStorage.setItem('theme', 'dark');
} catch (e) {
console.warn('本地存储不可用,降级处理');
// 比如用内存变量暂存,或提示用户
}










