0Pricing
JavaScript Academy · 课时

使用 JSON 存储对象

序列化对象，以便存储和读取。

使用 JSON 存储对象 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

存储只能保存字符串

网页存储保存的是字符串，因此无法直接保存对象。保存对象会得到无用的文本 "[object Object]"。解决方法是使用 JSON 格式。

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

使用 JSON.stringify 序列化

保存对象前，请使用 JSON.stringify 将其转换为 JSON 字符串。

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

使用 JSON.parse 反序列化

读取时，请使用 JSON.parse 将字符串还原为对象。

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

完整往返流程

完整模式是：存入时进行字符串化，取出时进行解析。对象和数组都适用这种方式。

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

处理 null 情况

JSON.parse(null) 会返回 null（不会抛出错误），但解析缺失数据时仍可能出现意外。请提供一个 fallback 默认值。

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

防止数据损坏

如果存储的 JSON 格式不正确，JSON.parse 会抛出 SyntaxError。请将其放在 try/catch 中，避免一条损坏的记录导致应用崩溃。

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

可复用的保存辅助函数

将字符串化步骤封装到辅助函数中，这样就不会忘记执行它。

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

JSON 会丢弃哪些内容

JSON 无法表示函数、undefined、Date 对象（它们会变成字符串）、Map 或 Set。请据此进行设计：将日期保存为 ISO 字符串，并在读取时重新构建日期对象。

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

还原日期

由于日期会被序列化为字符串，如果需要使用 Date 方法，请在解析后将它们转换回来。

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

更新嵌套数据

要更改已存储对象的一部分，请先读取它，修改副本，然后写回。存储没有部分更新接口。

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

对已存储结构进行版本管理

应用数据结构会随时间变化。存储一个 version 字段后，格式发生变化时就可以迁移或丢弃旧数据。

saveJSON("prefs", { version: 2, theme: "dark" });

快速检查

在网页存储中保存对象。

回顾

存储只能保存字符串，因此保存前要对对象执行 JSON.stringify，读取时再执行 JSON.parse。请使用 try/catch 保护解析过程，并提供默认值。请记住，JSON 会丢弃函数和 undefined，并将日期转换为字符串。通过读取、修改、写回的方式更新嵌套数据，并考虑为已存储的数据结构进行版本管理。

常见问题解答

「使用 JSON 存储对象」课时是免费的吗？

是的 — 「使用 JSON 存储对象」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「使用 JSON 存储对象」这节课中我会学到什么？

序列化对象，以便存储和读取。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「使用 JSON 存储对象」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 存储和读取数据
  2. localStorage 与 sessionStorage
  3. 使用 JSON 存储对象
  4. 存储事件与限制
← 返回 JavaScript Academy