localStorage和sessionStorage仅支持字符串值,存对象需JSON.stringify()编码、取时用JSON.parse()解码;二者区别在于生命周期(持久化vs标签页级)和作用域(同源共享vs单页隔离);读写应封装容错逻辑并注意JSON局限性与环境限制。

JavaScript 操作浏览器存储,核心就两条路:localStorage 和 sessionStorage,它们够用、兼容好、不用额外依赖。但直接塞对象或函数会出错,读写前必须处理类型。
为什么 localStorage.setItem() 存不了对象?
因为 localStorage 只接受字符串作为值。传入对象(比如 {name: "Alice"})时,它会自动调用 .toString(),结果变成 "[object Object]",数据彻底丢失。
- 正确做法:存之前用
JSON.stringify()编码 - 取出来后必须用
JSON.parse()解码,否则拿到的是字符串而非原始结构 - 如果值是
null、undefined或函数,JSON.stringify()会忽略或转成null,这类值无法可靠存储
localStorage 和 sessionStorage 到底怎么选?
-
localStorage:关闭标签页不丢,除非手动清除或代码调用localStorage.clear();同源(协议+域名+端口)下所有窗口共享 -
sessionStorage:仅当前标签页有效,关掉该页即清空;即使同源,新开的标签页也拿不到原页存的数据 - 两者 API 完全一致(
setItem/getItem/removeItem/clear),替换使用几乎零成本
如何安全地读写带默认值的存储项?
直接调用 localStorage.getItem("key") 返回可能是 null,不判空就 JSON.parse(null) 会报错:Unexpected token 'n' in JSON at position 0。
立即学习“Java免费学习笔记(深入)”;
- 推荐封装一个读取函数,自动处理
null和解析失败:
function getStorage(key, defaultValue = null) {
const raw = localStorage.getItem(key);
if (raw == null) return defaultValue;
try {
return JSON.parse(raw);
} catch {
return defaultValue;
}
}
- 写入时也建议加
try/catch,因为用户可能禁用存储、或超出 5MB 限额(不同浏览器略有差异),此时setItem会抛QuotaExceededError
真正容易被忽略的不是语法,而是边界情况:JSON 不支持 Date、RegExp、undefined、循环引用;跨域 iframe 无法访问父页的 localStorage;私密模式下部分浏览器会限制写入权限。这些不会立刻报错,但会在特定环境里静默失效。











