localstorage 存储对象需先用 json.stringify() 序列化为字符串,读取时用 json.parse() 反序列化并加异常处理;不支持函数、date 等类型,需手动转换或过滤;可封装 setcache/getcache 工具函数提升复用性与容错能力。

LocalStorage 只能存储字符串,所以存对象前必须先序列化,取出来后再反序列化还原。
用 JSON.stringify() 转成字符串再保存
直接调用 JSON.stringify() 把对象转为 JSON 字符串,再用 localStorage.setItem() 存进去:
- 比如要存用户信息:const user = { name: "张三", age: 28, role: "admin" };
- 正确写法:localStorage.setItem("userInfo", JSON.stringify(user));
- 错误写法(会变成
[object Object]):localStorage.setItem("userInfo", user);
用 JSON.parse() 安全读取并还原对象
读取时用 localStorage.getItem() 拿到字符串,再用 JSON.parse() 解析。注意加异常处理,避免解析失败导致报错:
Java开发手册规约集合,基于阿里巴巴Java开发手册(嵩山版)。 涵盖7大维度:编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要:(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- 推荐写法:const saved = localStorage.getItem("userInfo");
const user = saved ? JSON.parse(saved) : null; - 更稳妥的写法(捕获解析错误):try { const user = JSON.parse(saved); } catch (e) { console.warn("解析缓存失败", e); }
存数组、嵌套对象、日期等注意事项
JSON 只支持基本数据类型(字符串、数字、布尔、null、数组、纯对象),不支持函数、undefined、Date、RegExp 等:
- Date 类型会变成字符串(new Date().toJSON()),读取后需手动转回 Date 实例
- 如果对象含函数或特殊类型,考虑用 serialize-javascript 等库,或提前过滤/转换
- 数组同理:localStorage.setItem("list", JSON.stringify([1,2,3]));,读取后仍是数组
封装一个简单工具函数提升复用性
把存取逻辑收拢,减少重复代码,也方便统一加容错:
- function setCache(key, value) {
try { localStorage.setItem(key, JSON.stringify(value)); }
catch (e) { console.error("缓存写入失败", e); }
} - function getCache(key, defaultValue = null) {
try {
const str = localStorage.getItem(key);
return str ? JSON.parse(str) : defaultValue;
} catch (e) {
console.warn("缓存读取失败", e);
return defaultValue;
}
}
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










