JSON, localStorage และ fetch ครั้งแรกของคุณ

แปลงข้อมูลของคุณให้อยู่ในรูป JSON เก็บถาวรไว้ในเบราว์เซอร์ด้วย localStorage และดึงข้อมูลจากระยะไกลด้วย fetch

10 นาที · 3 คำถาม

JSON คือรูปแบบการแลกเปลี่ยนข้อมูลสากลของเว็บ: มันเป็นข้อความที่มีไวยากรณ์คล้ายกับออบเจกต์ JavaScript (คีย์อยู่ในอัญประกาศคู่ ไม่มีฟังก์ชัน) คุณต้องใช้เพียงสองเมธอดเท่านั้น: JSON.stringify เปลี่ยนค่า JavaScript ให้เป็นสตริง ส่วน JSON.parse ทำงานในทิศทางตรงกันข้าม

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

localStorage เก็บข้อมูลไว้ในเบราว์เซอร์ แม้หลังจากปิดแท็บไปแล้ว เหมาะอย่างยิ่งสำหรับธีมที่เลือกไว้ ฉบับร่าง หรือรายการงาน เนื่องจากมันเก็บได้เฉพาะข้อความ JSON จึงทำหน้าที่เป็นสะพานเชื่อม: แปลงเป็นสตริงก่อน setItem แล้วแปลงกลับหลัง getItem

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 ซึ่งก็เป็นแบบอะซิงโครนัสเช่นกัน

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

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. JSON.stringify ทำอะไร?
   • แปลงสตริง JSON ให้เป็นออบเจกต์ JavaScript
   • แปลงค่า JavaScript ให้เป็นสตริง JSON
   • ตรวจสอบความถูกต้องของไวยากรณ์ของไฟล์ JSON
2. localStorage.getItem คืนค่าอะไรสำหรับคีย์ที่ไม่มีอยู่?
   • สตริงว่าง
   • undefined
   • null
   • เกิดข้อผิดพลาดขึ้น
3. ทำไมจึงเขียน await response.json() แทนที่จะเป็น response.json() เฉย ๆ?
   • เพราะ response.json() คืน promise ออกมา
   • เพื่อแปลงการตอบกลับให้เป็นสตริง
   • เพื่อลองส่งคำขอใหม่หากมันล้มเหลว