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

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JavaScript如何存储数据？localStorage和sessionStorage使用教程》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

localStorage用于长期存储字符串数据，关闭浏览器不丢失，sessionStorage仅限当前标签页，关闭即清除；二者均需手动序列化/解析对象，容量约5–10MB，不随请求发送。

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 是“只记这一会儿”。 选哪个，关键看数据需要活多久、是否跨标签页共享。

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

今天关于《JavaScript数据存储方法：localStorage与sessionStorage教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！