JavaScript 中怎么在 LocalStorage 中存取复杂的 JSON 对象数据-js教程-PHP中文网

LocalStorage只能存储字符串，存取JSON对象需手动序列化与解析：存前用JSON.stringify()，取后用JSON.parse()，并用try-catch处理错误；特殊类型需自定义编解码逻辑。

javascript 中怎么在 localstorage 中存取复杂的 json 对象数据

LocalStorage 只能存储字符串，所以存取复杂 JSON 对象时，必须手动做 JSON.stringify() 和 JSON.parse() 转换。直接赋值对象会存成 [object Object]，取出来就无法还原。

存入复杂对象：先序列化再保存

把对象转成 JSON 字符串后，再用 localStorage.setItem() 存储：

确保对象可被 JSON 序列化（不能含函数、undefined、Symbol、Date 实例、RegExp 等）
推荐先用 JSON.stringify(obj) 转为字符串，再存入
可以加 try-catch 防止序列化失败（比如循环引用）

示例：

const user = {
  name: "张三",
  age: 28,
  hobbies: ["阅读", "骑行"],
  address: { city: "杭州", district: "西湖区" }
};

try {
  localStorage.setItem("user", JSON.stringify(user));
} catch (e) {
  console.error("保存失败：", e);
}

读取并还原对象：先取字符串再解析

用 localStorage.getItem() 拿到字符串后，必须用 JSON.parse() 才能变回对象：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

取出的值可能是 null（键不存在）或空字符串，解析前建议校验
同样推荐用 try-catch 捕获解析错误（比如数据被手动篡改、格式损坏）
解析成功后得到的是纯 JS 对象，不是原始类实例（如 Date 会变成普通对象）

示例：

const userData = localStorage.getItem("user");
let user = null;

if (userData) {
  try {
    user = JSON.parse(userData);
  } catch (e) {
    console.error("解析失败：", e);
  }
}

console.log(user?.name); // "张三"

处理特殊类型（如 Date、Map、Set）的技巧

原生 JSON 不支持 Date、正则、函数等，若需保留这类信息，可自定义序列化逻辑：

存 Date：转成 ISO 字符串（date.toISOString()），读取时用 new Date(str) 恢复
存 Map/Set：先转成数组（Array.from(map)），读取后再重建
更稳妥的方式是使用成熟库如 serialize-javascript（注意安全风险）或自行封装带类型标记的编解码器

封装一个安全的工具函数

避免每次重复写 try-catch，可以封装通用方法：

const storage = {
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch (e) {
      console.warn(`存储 ${key} 失败`, e);
    }
  },
  get(key, defaultValue = null) {
    const str = localStorage.getItem(key);
    if (!str) return defaultValue;
    try {
      return JSON.parse(str);
    } catch (e) {
      console.warn(`解析 ${key} 失败`, e);
      return defaultValue;
    }
  }
};

// 使用
storage.set("cart", [{ id: 1, qty: 2 }, { id: 2, qty: 1 }]);
const cart = storage.get("cart", []);

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南