web storage 存取 json 对象需用 json.stringify() 和 json.parse() 转换,注意异常处理、数据类型限制(如函数、undefined、date 等需预处理),并避免存储敏感信息。

直接用 JSON.stringify() 存,用 JSON.parse() 取,但要注意异常处理和数据类型限制。
存 JSON 对象:先序列化再 setItem
Web Storage(localStorage 或 sessionStorage)只支持字符串值,不能直接存对象。必须先转成 JSON 字符串:
- 用
JSON.stringify(obj)将对象转为字符串 - 再调用
localStorage.setItem('key', jsonString) - 如果对象含函数、undefined、Symbol、Date 实例或循环引用,
stringify会忽略或报错——需提前清理或自定义 replacer
取 JSON 对象:先 getItem 再解析
读取时拿到的是字符串,必须手动解析回对象:
- 用
const str = localStorage.getItem('key')获取字符串 - 检查
str是否为null或空字符串,避免JSON.parse(null)报错 - 用
JSON.parse(str)转回对象;建议包裹在try...catch中捕获语法错误
实用封装示例
可封装成安全的读写工具函数:
function setJson(key, obj) {
try {
localStorage.setItem(key, JSON.stringify(obj));
} catch (e) {
console.warn('存储失败:', e);
}
}
function getJson(key, fallback = null) {
try {
const str = localStorage.getItem(key);
return str ? JSON.parse(str) : fallback;
} catch (e) {
console.warn('解析失败:', e);
return fallback;
}
使用:setJson('user', { name: 'Alice', age: 30 });,const user = getJson('user');
注意 Date、RegExp 等特殊值
原生 JSON.stringify 会丢失 Date、RegExp、Map、Set 等类型(Date 变成字符串,其余变成空对象或被忽略):
- 如需保留 Date,可提前转为 ISO 字符串(
date.toISOString()),读取后用new Date(str)恢复 - 复杂结构建议用第三方序列化库(如
flatted或serialize-javascript),或自行实现replacer/reviver - 敏感数据别存在 localStorage —— 它是同步、无加密、易被脚本读取的
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











