0Pricing
JavaScript Academy · บทเรียน

การจัดเก็บออบเจ็กต์ด้วย JSON

แปลงออบเจ็กต์เป็นข้อมูลสำหรับจัดเก็บและเรียกกลับมาใช้

การจัดเก็บออบเจ็กต์ด้วย JSON เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

พื้นที่จัดเก็บเก็บได้เฉพาะสตริง

พื้นที่จัดเก็บเว็บเก็บสตริง ดังนั้นคุณจึงบันทึกวัตถุโดยตรงไม่ได้ การบันทึกวัตถุหนึ่งรายการจะได้ข้อความที่ไม่มีประโยชน์อย่าง "[object Object]" วิธีแก้คือใช้ข้อมูลเจสัน

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

แปลงเป็นสตริงด้วย JSON.stringify

แปลงวัตถุเป็นสตริงข้อมูลเจสันด้วย JSON.stringify ก่อนจัดเก็บ

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 (ไม่โยนข้อผิดพลาด) แต่การแปลงข้อมูลที่ไม่มีอยู่ก็ยังอาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิดได้ ควรเตรียมค่าเริ่มต้นสำรองไว้

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

ป้องกันข้อมูลเสียหาย

หากข้อมูลเจสันที่จัดเก็บมีรูปแบบไม่ถูกต้อง 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 ไม่เก็บไว้

รูปแบบเจสันไม่สามารถแทนฟังก์ชัน 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 และเตรียมค่าเริ่มต้นไว้ โปรดจำไว้ว่าข้อมูลเจสันจะไม่นำฟังก์ชันและ undefined ไปจัดเก็บ และจะแปลงวันที่เป็นสตริง อัปเดตข้อมูลซ้อนกันด้วยลำดับอ่าน-แก้ไข-เขียน และพิจารณากำหนดเวอร์ชันให้กับรูปแบบข้อมูลที่จัดเก็บ

คำถามที่พบบ่อย

บทเรียน “การจัดเก็บออบเจ็กต์ด้วย JSON” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดเก็บออบเจ็กต์ด้วย JSON” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดเก็บออบเจ็กต์ด้วย JSON”

แปลงออบเจ็กต์เป็นข้อมูลสำหรับจัดเก็บและเรียกกลับมาใช้ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การจัดเก็บออบเจ็กต์ด้วย JSON” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การจัดเก็บและอ่านข้อมูล
  2. localStorage เทียบกับ sessionStorage
  3. การจัดเก็บออบเจ็กต์ด้วย JSON
  4. เหตุการณ์และข้อจำกัดของพื้นที่จัดเก็บ
← กลับไปที่ JavaScript Academy