← 返回目录

9. JSON 序列化存储复杂数据

localStorage 的柜子只收"纸条"（字符串）。你把一个对象直接塞进去，它会被强扭成一行字 "[object Object]"，结构全丢。正确做法：存之前 JSON.stringify 打包、取之后 JSON.parse 拆包。

9.1 互动演示（错误 vs 正确存储）

9.2 知识点讲解

① 问题出在哪？为什么"直接存"会变成 [object Object]

对象想变成字符串的时候，JS 会悄悄调用它的 toString 方法。普通对象的 toString 返回的就是 "[object Object]"——所以存的其实是一句没用的描述文字，name、age 全没了。

let user = { id: 1, name: "小明", age: 18 }; // 一个活生生的对象

// 错误示范：直接把对象塞进柜子，它被逼着变成字符串
localStorage.setItem("userInfo", user);
console.log(localStorage.getItem("userInfo")); // 读出来是 "[object Object]"！全废了

// 数组也一样遭殃：被 toString 写成 "10,20,30"
localStorage.setItem("list", [10, 20, 30]);
console.log(localStorage.getItem("list")); // 读出来是 "10,20,30"

判断标准：getItem 读出来能不能 .name / [0]？不能，就是存坏了。这是存储最经典的坑，作业四①就是让你亲眼看一次。

② 正确姿势：打包存、拆包取（成对使用）

// 存之前：JSON.stringify 把对象打包成一行合法的 JSON 字
let user = { id: 1, name: "小明", age: 18 };
localStorage.setItem("userInfo", JSON.stringify(user));
// 柜子里现在躺着：{"id":1,"name":"小明","age":18}

// 取回来：JSON.parse 把这行字拆包，变回真正的对象
let userStr = localStorage.getItem("userInfo");
let userObj = JSON.parse(userStr);
console.log(userObj.name); // "小明" ✓ 又能 .name 了

JSON.stringify 是"打包"，JSON.parse 是"拆包"，两个永远成对出现：存用 stringify、取用 parse。

③ 复杂嵌套数据（数组套对象、对象套对象）也 OK

let user = {
  id: 1,
  name: "李四",
  hobbies: ["读书", "跑步"], // 里面还套了个数组
  address: { city: "北京", district: "海淀" } // 里面还套了个对象
};

// 存之前打包，一层不落地压扁成一行字
localStorage.setItem("user", JSON.stringify(user));

// 取的时候拆包，嵌套结构原样还原
let u = JSON.parse(localStorage.getItem("user"));
console.log(u.hobbies[0]); // "读书"
console.log(u.address.city); // "北京"

不管嵌套多深，stringify/parse 都能完整还原——这是存购物车、用户信息的标准套路。