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

เหตุการณ์และข้อจำกัดของพื้นที่จัดเก็บ

ตอบสนองต่อการเปลี่ยนแปลงและปฏิบัติตามขีดจำกัดโควตา

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

การตอบสนองต่อการเปลี่ยนแปลงของพื้นที่จัดเก็บข้อมูล

เหตุการณ์ storage ทำให้แท็บหนึ่งตอบสนองได้เมื่ออีกแท็บหนึ่งเปลี่ยนแปลง localStorage ซึ่งช่วยให้ซิงโครไนซ์ข้อมูลระหว่างแท็บได้อย่างง่ายดาย

การรับฟังพื้นที่จัดเก็บข้อมูล

เพิ่มตัวรับฟังเหตุการณ์บน window ตัวรับฟังนี้จะทำงานในแท็บ OTHER ของต้นทางเดียวกันทุกครั้งที่ localStorage เปลี่ยนแปลง แต่จะไม่ทำงานในแท็บที่เป็นผู้เปลี่ยนแปลง

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

ออบเจ็กต์ StorageEvent

เหตุการณ์นี้มี key, oldValue, newValue, storageArea และ url ซึ่งเมื่อรวมกันแล้วจะอธิบายได้อย่างชัดเจนว่าเกิดการเปลี่ยนแปลงอะไรขึ้น

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

ทำงานเฉพาะในแท็บอื่น

ข้อควรรู้อย่างหนึ่งคือ เหตุการณ์นี้จะ NOT ทำงานในแท็บเดียวกับที่เรียก setItem เหตุการณ์นี้มีไว้แจ้งเตือนแท็บอื่น ดังนั้นอย่าพึ่งพาเหตุการณ์นี้สำหรับการอัปเดตภายในแท็บเดียวกัน

รูปแบบการซิงค์ระหว่างแท็บ

ใช้เหตุการณ์นี้เพื่อทำให้แท็บต่าง ๆ มีข้อมูลสอดคล้องกัน เช่น บันทึกผู้ใช้ออกจากระบบในทุกแท็บเมื่อแท็บหนึ่งล้างโทเค็นยืนยันตัวตน

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

การตรวจจับ clear()

เมื่อ clear() ทำงาน เหตุการณ์จะเกิดขึ้นโดยที่ key มีค่าเป็น null ให้จัดการกรณีนี้เพื่อรีเซ็ตทุกอย่าง

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

โควตาพื้นที่จัดเก็บข้อมูล

แต่ละต้นทางจะได้รับพื้นที่จำกัด โดยทั่วไป localStorage มีโควตารวมประมาณ 5MB ซึ่งน้อยกว่า IndexedDB มาก ดังนั้นควรจัดเก็บข้อมูลในปริมาณพอเหมาะเท่านั้น

ข้อผิดพลาดเมื่อเกินโควตา

หากใช้พื้นที่เกินโควตา การเรียก setItem จะโยน QuotaExceededError ควรครอบการเขียนข้อมูลขนาดใหญ่หรือข้อมูลที่ไม่ผ่านการตรวจสอบด้วย try/catch เสมอ

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

UTF-16 ใช้พื้นที่เป็นสองเท่า

สตริงถูกจัดเก็บในรูปแบบ UTF-16 ดังนั้นอักขระแต่ละตัวจึงใช้พื้นที่ประมาณ 2 ไบต์ โควตา 5MB จัดเก็บอักขระได้ประมาณ 2.5 ล้านตัว และจะจัดเก็บได้น้อยกว่านี้หากเป็นข้อความที่ไม่ใช่ ASCII

การประมาณการใช้งาน

คุณสามารถวัดการใช้งานโดยประมาณได้ด้วยการรวมความยาวของคีย์และค่าเข้าด้วยกัน แม้จะไม่มี API ที่ให้ค่าที่แม่นยำ แต่ก็ใช้เป็นค่าประมาณที่เป็นประโยชน์ได้

let total = 0;
for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");

เมื่อควรใช้สิ่งที่ใหญ่กว่า

สำหรับข้อมูลขนาดใหญ่หรือข้อมูลที่มีโครงสร้างซึ่งเกินไม่กี่ MB ให้เลือกใช้ IndexedDB Web Storage เหมาะที่สุดสำหรับแฟล็ก ค่ากำหนด และโทเค็นขนาดเล็ก

ตรวจสอบความเข้าใจ

เหตุการณ์และขีดจำกัดของพื้นที่จัดเก็บข้อมูล

สรุป

เหตุการณ์ storage จะแจ้งแท็บ OTHER ของต้นทางเกี่ยวกับการเปลี่ยนแปลงใน localStorage โดยมี key, oldValue และ newValue (คีย์จะเป็น null เมื่อใช้ clear) โควตามีค่าประมาณ 5MB และการเขียนข้อมูลเกินโควตาจะโยน QuotaExceededError ดังนั้นควรครอบการเขียนข้อมูลที่มีความเสี่ยงด้วย try/catch และใช้ IndexedDB สำหรับข้อมูลขนาดใหญ่กว่า

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

บทเรียน “เหตุการณ์และข้อจำกัดของพื้นที่จัดเก็บ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เหตุการณ์และข้อจำกัดของพื้นที่จัดเก็บ”

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

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

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

บทเรียน “เหตุการณ์และข้อจำกัดของพื้นที่จัดเก็บ” ใช้เวลานานแค่ไหน

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

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

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

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

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