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

立即学习“Java免费学习笔记（深入）”；

• 避免在循环里反复调用 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() 的时间。