HTML Academy · บทเรียน

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

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

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

การสื่อสารระหว่างแท็บ

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

การลงทะเบียนตัวรับฟัง

แนบตัวจัดการเข้ากับ window: window.addEventListener("storage", handleStorage) ตัวรับฟังจะทำงานเฉพาะในแท็บหรือหน้าต่างอื่นของต้นทางเดียวกันเท่านั้น ไม่ทำงานในแท็บที่เป็นผู้ดำเนินการเปลี่ยนแปลงเอง เพราะแท็บนั้นทราบการอัปเดตอยู่แล้ว

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

คุณสมบัติของ StorageEvent

เหตุการณ์นี้มี key ซึ่งเป็นคีย์ที่เปลี่ยนแปลง oldValue และ newValue ซึ่งเป็นสตริงหรือ null url ซึ่งเป็นหน้าที่เรียกให้เกิดการเปลี่ยนแปลง และ storageArea ซึ่งเป็นวัตถุพื้นที่จัดเก็บข้อมูล ได้แก่ localStorage หรือ sessionStorage

clear() กำหนดคีย์เป็น null

เมื่อแท็บอื่นเรียก localStorage.clear() เหตุการณ์พื้นที่จัดเก็บข้อมูลจะทำงานหนึ่งครั้ง โดยมี key === null และทั้ง oldValue กับ newValue เป็น null ให้ตรวจหารูปแบบนี้เพื่อจัดการการล้างข้อมูลทั้งหมดแยกจากการอัปเดตคีย์เดียว

พฤติกรรมของ removeItem

การเรียก removeItem จะทำให้เหตุการณ์เกิดขึ้นพร้อมกับ newValue === null และ oldValue ที่เก็บสตริงเดิมไว้ ให้แยกความแตกต่างระหว่าง "ลบคีย์แล้ว" กับ "กำหนดคีย์เป็นสตริง null" โดยตรวจสอบว่า newValue เป็นค่า null โดยตรง ไม่ใช่สตริง "null"

ข้อจำกัดภายในแท็บเดียวกัน

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

function setItem(key, val) {
  localStorage.setItem(key, val);
  window.dispatchEvent(new CustomEvent("local-storage", { detail: { key, val } }));
}

การออกจากระบบข้ามแท็บ

กำหนดคีย์อย่าง auth:logout พร้อมเวลาประทับเมื่อผู้ใช้ออกจากระบบ แท็บอื่นจะรับฟังคีย์นี้ในเหตุการณ์พื้นที่จัดเก็บข้อมูล แล้วล้างสถานะเซสชันของตนเองทันที พร้อมเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบโดยที่ผู้ใช้ไม่ต้องคลิกซ้ำ

การซิงค์ธีมและค่ากำหนด

เมื่อผู้ใช้สลับธีมในแท็บหนึ่ง ให้เขียน theme ลงใน localStorage ตัวจัดการเหตุการณ์พื้นที่จัดเก็บข้อมูลในแท็บอื่นทั้งหมดจะอ่านค่าใหม่และนำไปใช้กับ document.documentElement.dataset.theme การเปลี่ยนแปลงจะแสดงขึ้นทันทีในแท็บที่เปิดอยู่ทั้งหมด

การกรองตามคีย์

ตัวจัดการหนึ่งตัวสามารถรองรับหลายฟีเจอร์ได้ด้วยการแยกสาขาตาม e.key คำสั่งเลือกสาขาช่วยให้ตัวกระจายงานอ่านง่าย โดยแต่ละกรณีจะจัดการคีย์พื้นที่จัดเก็บข้อมูลหนึ่งรายการและเพิกเฉยต่อการเปลี่ยนแปลงที่ไม่เกี่ยวข้องซึ่งฟีเจอร์อื่นเขียนลงในพื้นที่จัดเก็บข้อมูลเดียวกัน

sessionStorage ไม่ข้ามแท็บ

sessionStorage แยกตามแท็บ การเขียนข้อมูลจะไม่ส่งเหตุการณ์พื้นที่จัดเก็บข้อมูลไปยังแท็บอื่น เพราะแต่ละแท็บมี sessionStorage ของตนเองที่เป็นอิสระต่อกัน หากต้องการส่งสัญญาณข้ามแท็บ ให้ใช้ localStorage แม้ว่าจะลบคีย์ทันทีหลังจากนั้นก็ตาม

ทางเลือกนอกเหนือจาก BroadcastChannel

หากต้องการส่งข้อความข้ามแท็บที่มีความสามารถมากขึ้น ส่วนติดต่อโปรแกรม BroadcastChannel สามารถส่งข้อมูลแบบมีโครงสร้างได้โดยไม่แตะต้องพื้นที่จัดเก็บข้อมูล: new BroadcastChannel("app").postMessage({ type: "logout" }) ใช้ BroadcastChannel สำหรับสัญญาณชั่วคราว และใช้เหตุการณ์พื้นที่จัดเก็บข้อมูลสำหรับสถานะที่ต้องคงอยู่ด้วย

ตรวจสอบความรู้

หากแท็บ A เรียก localStorage.setItem("theme", "dark") แท็บใดจะได้รับเหตุการณ์พื้นที่จัดเก็บข้อมูล

สรุป

เหตุการณ์พื้นที่จัดเก็บข้อมูลจะแจ้งเตือนข้ามแท็บทุกครั้งที่ localStorage ในแท็บอื่นมีการเปลี่ยนแปลง โดยมี key, oldValue, newValue และ storageArea เหตุการณ์นี้จะไม่ทำงานในแท็บที่เขียนข้อมูล ดังนั้นควรใช้ร่วมกับเหตุการณ์แบบกำหนดเองเพื่อส่งเหตุการณ์ทั้งภายในและระยะไกลอย่างครบถ้วน ใช้แนวทางนี้สำหรับการเผยแพร่การออกจากระบบ การซิงค์ธีม และสถานะใด ๆ ที่ควรสอดคล้องกันระหว่างหน้าต่างเบราว์เซอร์

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

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

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

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

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

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

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

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

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

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

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

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

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

← กลับไปที่ HTML Academy