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 也是独立的。

两者都遵循同源策略：只有协议、域名、端口完全相同，才能互相访问数据。

存对象？记得先转成 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('本地存储不可用，降级处理');
  // 比如用内存变量暂存，或提示用户
}