localStorage和sessionStorage只能存储字符串,存对象需JSON.stringify()、读取需JSON.parse()并加try/catch防错,二者API相同但生命周期不同:localStorage持久化,sessionStorage仅限当前标签页。

它们只能存字符串,任何非字符串数据都得自己转成字符串再存,否则会意外变成 "[object Object]" 或 "undefined"。
localStorage 和 sessionStorage 的 setItem 方法只接受字符串值
这两个 API 的底层设计就是键值对存储,且 value 参数类型被强制限定为 DOMString(即字符串)。传入对象、数组、数字甚至布尔值,都会被隐式调用 .toString():
localStorage.setItem('user', { name: 'Alice' });
console.log(localStorage.getItem('user')); // "[object Object]"
localStorage.setItem('count', 42);
console.log(localStorage.getItem('count')); // "42"(看似正常,但类型已丢失)
所以实际使用中必须显式序列化:
- 存对象/数组:统一用
JSON.stringify() - 读取后:必须用
JSON.parse()恢复,且要加try/catch防止解析失败(比如值被手动篡改过) - 存布尔或数字:虽然能隐式转字符串,但读取时仍是字符串,需手动转换(
Boolean()、Number()或一元加号+)
如何安全地存取 JSON 数据
最常踩的坑是没处理 JSON.parse() 报错。用户可能直接在开发者工具里把 localStorage 值改成非法 JSON,导致页面 JS 崩溃。
本书全面介绍PHP脚本语言和MySOL数据库这两种目前最流行的开源软件,主要包括PHP和MySQL基本概念、PHP扩展与应用库、日期和时间功能、PHP数据对象扩展、PHP的mysqli扩展、MySQL 5的存储例程、解发器和视图等。本书帮助读者学习PHP编程语言和MySQL数据库服务器的最佳实践,了解如何创建数据库驱动的动态Web应用程序。
立即学习“Java免费学习笔记(深入)”;
function safeSet(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (e) {
console.error('localStorage set failed:', e);
}
}
function safeGet(key, defaultValue = null) {
const raw = localStorage.getItem(key);
if (!raw) return defaultValue;
try {
return JSON.parse(raw);
} catch (e) {
console.warn('Invalid JSON in localStorage:', key, e);
return defaultValue;
}
}
safeSet('profile', { id: 123, active: true });
console.log(safeGet('profile')); // { id: 123, active: true }
sessionStorage 和 localStorage 的行为差异只在生命周期,存取方式完全一致
别被名字误导——它们的 API 完全一样,区别仅在于:
-
localStorage:数据永不过期,除非手动清除或用户清缓存 -
sessionStorage:只在当前浏览器标签页有效,关闭标签即清空;新开同地址标签页也是独立的 - 两者都受同源策略限制:协议、域名、端口必须完全一致才能互相访问
- 都不支持设置过期时间,也不能存函数、undefined、Symbol、BigInt 等无法 JSON 序列化的值
真正容易被忽略的是:哪怕你只存一个简单对象,也得每次读写都包一层 JSON.stringify 和 JSON.parse,而且得默认接受它不支持嵌套函数、Date 对象、RegExp 等——这些一旦出现,JSON.stringify 会静默丢弃。










