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

存复杂数据（对象/数组）到 localStorage，要用 JSON 转成字符串。

核心两步：
① 存——JSON.stringify(obj) 转字符串再 setItem
② 取——getItem 拿到字符串再 JSON.parse 转回对象

坑：直接存对象得 "[object Object]"、parse 前要判断 null、JSON 不支持函数和 undefined。

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);

// 读出来是 "[object Object]"！全废了
console.log(localStorage.getItem("userInfo"));

// 数组也一样遭殃：被 toString 写成 "10,20,30"
localStorage.setItem("list", [10, 20, 30]);

// 读出来是 "10,20,30"
console.log(localStorage.getItem("list"));

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

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

// 存之前：JSON.stringify 把对象打包成一行合法的 JSON 字
let user = { id: 1, name: "小明", age: 18 };

// 柜子里现在躺着：{"id":1,"name":"小明","age":18}
localStorage.setItem("userInfo", JSON.stringify(user));

// 取回来：JSON.parse 把这行字拆包，变回真正的对象
let userStr = localStorage.getItem("userInfo");
let userObj = JSON.parse(userStr);

// "小明" 又能 .name 了
console.log(userObj.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 都能完整还原——这是存购物车、用户信息的标准套路。

本页重点