Kodokon kodokon.com

JSON、localStorage 与你的第一次 fetch

把你的数据序列化为 JSON，用 localStorage 把它持久化到浏览器中，并用 fetch 获取远程数据。

10 分钟 · 3 题

在 Kodokon 中打开本课

JSON 是 Web 的通用交换格式：它是一种文本，其语法看起来像 JavaScript 对象（键用双引号，不含函数）。你只需要两个方法：JSON.stringify 把一个 JavaScript 值变成字符串，JSON.parse 则反向而行。

JAVASCRIPT
const task = { title: "Review the lesson", done: false };

const json = JSON.stringify(task);
console.log(json);
// {"title":"Review the lesson","done":false}

const parsed = JSON.parse(json);
console.log(parsed.done); // false
在一个 JavaScript 对象和一个 JSON 字符串之间完成一次完整往返。

localStorage 会把数据保存在浏览器中，即便标签页已经关闭。它非常适合保存所选的主题、一份草稿或一个任务列表。由于它只存储文本，JSON 便充当了桥梁：在 setItem 之前序列化，在 getItem 之后反序列化。

JAVASCRIPT
const tasks = [
  { title: "Buy bread", done: false },
  { title: "Review the lesson", done: true }
];

localStorage.setItem("tasks", JSON.stringify(tasks));

const raw = localStorage.getItem("tasks");
const saved = raw ? JSON.parse(raw) : [];
console.log(saved.length); // 2
保存后再读回一个持久化的任务列表。

最后一块拼图：从服务器获取数据。fetch 发送一个 HTTP 请求并返回一个promise。借助 async/await，代码可以自上而下地阅读：你等待响应，检查它是否有效，然后等待 JSON 解码——这一步同样是异步的。

JAVASCRIPT
async function loadUsers() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  );
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const users = await response.json();
  console.log(users[0].name);
}

loadUsers();
带 HTTP 状态检查的第一次完整网络调用。

知识检测

确认你已牢记本课的重点内容。

  1. JSON.stringify 做什么？
    • 它把一个 JSON 字符串转换成一个 JavaScript 对象
    • 它把一个 JavaScript 值转换成一个 JSON 字符串
    • 它校验一个 JSON 文件的语法
  2. 对于一个不存在的键，localStorage.getItem 会返回什么？
    • 一个空字符串
    • undefined
    • null
    • 抛出一个错误
  3. 为什么要写 await response.json() 而不是简单地写 response.json()？
    • 因为 response.json() 返回一个 promise
    • 为了把响应转换成一个字符串
    • 为了在请求失败时重试它