JavaScript数据存储方式：localStorage与sessionStorage教程

JavaScript通过localStorage和sessionStorage提供简单高效的客户端数据存储方案：前者持久保存、跨会话存在，适合长期记忆用户偏好或登录状态；后者仅限当前标签页生命周期，关闭即销毁，专为临时状态如表单草稿或滚动位置而生；二者均基于字符串存储，需手动JSON序列化/解析对象，容量达5–10MB且不随HTTP请求发送，但易踩类型转换、容量超限和隐私模式兼容性等坑——掌握这些核心差异与实操细节，才能安全、高效地用好浏览器的“小仓库”。

JavaScript 用 localStorage 和 sessionStorage 存储字符串数据，它们都属于 Web Storage API，比 Cookie 更简单、容量更大（通常 5–10MB），且不会随请求自动发送到服务器。

localStorage：长期保存，关浏览器也不丢

数据会一直保留在浏览器里，除非手动清除（比如调用 removeItem() 或用户清缓存）。

• 存数据：必须是字符串，非字符串会自动转成字符串（比如对象会变 [object Object]）
  localStorage.setItem('username', 'Alice');
localStorage.setItem('count', 42); // 自动变成 "42"
• 取数据：getItem() 返回字符串，记得手动解析（如 JSON）
  const name = localStorage.getItem('username'); // "Alice"
const count = Number(localStorage.getItem('count')); // 42
const user = JSON.parse(localStorage.getItem('user')); // 如果存的是 JSON 字符串
• 删数据：removeItem('key') 删除单个，clear() 清空全部
  localStorage.removeItem('tempData');

sessionStorage：只在当前标签页有效，关掉就没了

生命周期绑定当前浏览器标签页（或窗口）。刷新保留，但关闭标签页后数据自动清除。适合临时状态，比如表单草稿、页面滚动位置。

• 用法和 localStorage 完全一样，只是把 localStorage 换成 sessionStorage
sessionStorage.setItem('draft', '今天要完成…');
const draft = sessionStorage.getItem('draft');
• 新开一个标签页访问同一网址，sessionStorage 是完全独立的，互不干扰。

注意事项和常见坑

这两个存储只能存字符串，直接存对象、数组、日期等会丢失类型和结构。

• 存对象？先 JSON 序列化
  localStorage.setItem('user', JSON.stringify({name: 'Bob', age: 30}));
• 取的时候别忘了反序列化
  const user = JSON.parse(localStorage.getItem('user')) || {};（加 ||{} 防止 null 报错）
• 超出容量会报错（QuotaExceededError），建议存之前 try-catch
• 隐私模式下可能不可用，部分浏览器限制写入，使用前可简单检测：
  try { localStorage.setItem('test', 'ok'); localStorage.removeItem('test'); } catch(e) { /* 不支持 */ }

localStorage 和 sessionStorage 的区别一句话总结

localStorage 是“记住你”，sessionStorage 是“只记这一会儿”。 选哪个，关键看数据需要活多久、是否跨标签页共享。

基本上就这些。不复杂，但容易忽略类型转换和异常处理。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~