JavaScript本地存储使用详解

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript本地存储操作教程》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

localStorage和sessionStorage只支持字符串值，存对象需JSON.stringify()、取时用JSON.parse()并加try/catch；前者同源永久存储，后者仅限当前tab；敏感信息勿存，注意容量限制与XSS风险。

JavaScript 操作本地存储，核心就两条路：localStorage 和 sessionStorage。它们不是“教程式玩具”，而是真实项目里必须稳稳用对的 API——存错类型、读错时机、忽略容量限制，都会导致数据丢失或功能异常。

为什么 setItem() 存进去的数字变成字符串了？

因为 localStorage 和 sessionStorage 只接受字符串作为值。任何非字符串类型（包括 null、undefined、对象、数组、数字）都会被自动调用 .toString() 转换：

localStorage.setItem('count', 42);
console.log(typeof localStorage.getItem('count')); // "string"
console.log(localStorage.getItem('count')); // "42"

• 存对象/数组：必须先 JSON.stringify()，否则会存成 "[object Object]" 或 "[object Array]"
• 取的时候：记得用 JSON.parse()，但要加 try/catch——万一数据损坏或被手动篡改，JSON.parse() 会直接抛错
• 数字/布尔值：如果只存简单值，可手动转换：localStorage.setItem('flag', String(true))，取时用 Boolean(localStorage.getItem('flag')) 或 Number(localStorage.getItem('count'))

localStorage 和 sessionStorage 到底该选哪个？

区别不在“本地”与否，而在生命周期和作用域：

• localStorage：同源下永久存在，关浏览器、重启电脑都不丢；适合存用户偏好、主题设置、长期缓存的数据
• sessionStorage：仅限当前 tab 页，关闭 tab 即清空；适合临时状态，比如表单草稿、多步流程中的中间数据
• 两者都遵循同源策略（协议 + 域名 + 端口），https://a.com 和 http://a.com 是不同源，互不可见
• 注意：iframe 里的页面若与父页同源，可访问父页的 localStorage；但跨域 iframe 无法读写，且部分浏览器（如 Safari 隐私模式）会直接禁用 localStorage

怎么安全地批量读写多个键，又不触发频繁的 DOM 存储事件？

storage 事件只在**其他同源窗口**中修改存储时触发，当前窗口写入不会触发自身监听器。但高频写入仍可能引发性能问题（尤其存大对象时）：

• 避免在循环里反复调用 setItem()，合并为一次操作更稳妥（比如把多个字段塞进一个对象再存）
• 读取多个键不要连写多次 getItem()，可以封装一个批量读函数：

function getMultiple(keys) {
  return keys.reduce((acc, key) => {
    const val = localStorage.getItem(key);
    if (val !== null) acc[key] = JSON.parse(val);
    return acc;
  }, {});
}
// 使用：getMultiple(['theme', 'lang', 'lastId'])

• 写入前建议先检查容量：localStorage.length 能知道键数量，但实际大小需估算；多数浏览器限制约 5–10MB，超限会抛 QuotaExceededError
• 敏感信息（如 token）别存 localStorage——XSS 攻击可直接读取；优先用 httpOnly Cookie 或内存变量

真正难的不是“怎么存”，而是想清楚“谁在什么时候能读到它”“它到底该活多久”“出错了有没有 fallback”。这些判断一旦写死，后期调试成本远高于写几行 setItem() 的时间。

今天关于《JavaScript本地存储使用详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！