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 攻击可直接读取；优先用httpOnlyCookie 或内存变量
真正难的不是“怎么存”，而是想清楚“谁在什么时候能读到它”“它到底该活多久”“出错了有没有 fallback”。这些判断一旦写死，后期调试成本远高于写几行 setItem() 的时间。
