HTML5本地存储使用方法及区别解析

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《HTML5本地存储用法及localStorage与sessionStorage区别》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

localStorage和sessionStorage生命周期与作用域不同：前者同源永久存储，适合用户偏好；后者仅限当前标签页，适合临时数据。二者均只支持字符串，存对象需JSON序列化，且有跨源、私密模式等限制。

localStorage 和 sessionStorage 都能存字符串，但生命周期、作用域和用途完全不同——别直接替换成同一个 API，否则页面刷新后数据就丢了，或者关掉标签页还残留着不该留的数据。

localStorage 适合存长期不变的用户偏好

比如主题色、语言选择、折叠菜单状态。它在同源（协议+域名+端口）下永久存在，除非手动清除或代码删除。

• 写入必须是字符串：localStorage.setItem('theme', 'dark')，对象要先 JSON.stringify()
• 读取后需手动解析：JSON.parse(localStorage.getItem('theme'))
• 不支持跨子域名共享，https://a.example.com 和 https://b.example.com 是两个独立存储空间
• 容量通常为 5–10 MB，但不同浏览器有差异；超出会抛 QuotaExceededError

sessionStorage 只在当前标签页生命周期内有效

关掉这个标签页（不是整个浏览器），所有数据自动清空。适合临时中转数据，比如表单草稿、多步流程中的中间状态。

• 用法和 localStorage 完全一致：sessionStorage.setItem('step', '2')
• 新开一个标签页访问同一页面，sessionStorage 是空的，和原标签页互不影响
• 即使同源，iframe 中的 sessionStorage 也和父页面隔离（除非同源且显式传递）
• 无法被 Service Worker 访问，也不参与 HTTP 请求

别踩这些坑：常见错误现象与修复

这两个 API 看似简单，但实际项目里高频出错：

• 试图存对象不序列化 → 读出来是 [object Object] → 必须用 JSON.stringify() 和 JSON.parse()
• 在 HTTP 页面里调用 HTTPS 域名的 storage → 触发跨源限制，报 SecurityError
• 在私密模式（如 Safari 无痕、Chrome Incognito）下写入失败 → 某些浏览器默认禁用 storage，需加 try/catch
• 监听 storage 事件时，只在**其他标签页**触发，当前页修改不会收到通知

if (typeof localStorage !== 'undefined') {
  try {
    localStorage.setItem('test', 'ok');
  } catch (e) {
    console.warn('localStorage 不可用：', e.name);
  }
} else {
  console.warn('浏览器不支持 localStorage');
}

真正麻烦的不是怎么写，而是什么时候该用哪个——比如登录态 token 绝对不能放 sessionStorage（F5 刷新就登出），但临时上传文件的进度 ID 就不该进 localStorage（关掉页面还占着空间）。边界模糊时，优先选 sessionStorage，再评估是否需要升为 localStorage。

本篇关于《HTML5本地存储使用方法及区别解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！