เราทุกคนรู้ดีว่าต้องปฏิบัติตามเงื่อนไขสองข้อต่อไปนี้เพื่อทริกเกอร์ window.onstorage:
เงื่อนไขที่สองข้างต้น พูดง่ายๆ คือ: การเริ่มต้นของที่เก็บข้อมูล เนื่องจากไม่มีที่เก็บข้อมูล ค่าของมันจะเป็นโมฆะ หรือเป็นการอัปเดตของที่เก็บข้อมูลที่มีอยู่
ตัวอย่าง:
// เตรียมใช้งาน storagewindow.localStorage.setItem('a', 123); // ลงทะเบียนเหตุการณ์ onstorage window.onstorage = (e) => { console.log(e);}; เอ', 123);บรรทัดสุดท้ายของโค้ดด้านบนไม่ทำให้เกิดเหตุการณ์ onstorage เนื่องจากค่าของ a ไม่มีการเปลี่ยนแปลง จึงเป็น 123 ก่อนและหลัง ดังนั้นเบราว์เซอร์จึงพิจารณาว่าการอัปเดตนี้ไม่ถูกต้อง
เนื่องจากเบราว์เซอร์ทริกเกอร์เหตุการณ์ onstorage ถ้าเราเปิดหลายหน้าภายใต้ชื่อโดเมนเดียวกันและดำเนินการเมธอด window.localStorage.setItem กับรายการใดรายการหนึ่ง (เราต้องตรวจสอบให้แน่ใจด้วยว่ารายการที่สองที่กล่าวถึงในตอนต้นของบทความ ตรงตามเงื่อนไข) ดังนั้น หากเพจอื่นรับฟังเหตุการณ์ onstorage การเรียกกลับเหตุการณ์ onstorage ในเพจเหล่านี้จะถูกดำเนินการ
ตัวอย่าง:
// http://www.example.com/a.html<script>// ลงทะเบียนเหตุการณ์ onstorage window.onstorage = (e) => { console.log(e);};</script> // http://www.example.com/b.html<script>// ลงทะเบียนเหตุการณ์ onstorage window.onstorage = (e) => { console.log(e);};</script> // http://www.example.com/c.html<script>// ทริกเกอร์เหตุการณ์ onstorage window.localStorage.setItem('a', new Date().getTime());</script>ตราบใดที่เพจ c ถูกเปิดหลังจากเพจ a และ b (แม้ว่าเพจทั้งสามจะไม่ได้อยู่ในหน้าต่างเบราว์เซอร์เดียวกัน คุณจะต้องแยกความแตกต่างระหว่างหน้าต่างและเพจแท็บ) จากนั้นจึงเหตุการณ์ onstorage ในเพจ a และ b จะถูกกระตุ้น
ตอนนี้เรารู้วิธีใช้เหตุการณ์การจัดเก็บข้อมูลเพื่อให้บรรลุการสื่อสารระหว่างเพจแล้ว การสื่อสารนี้มีประโยชน์อะไรสำหรับเรา?
ที่จริงแล้ว เราเพียงแต่ต้องรู้ว่าการดำเนินการอัพเดตพื้นที่เก็บข้อมูลใดที่ทำให้เกิดเหตุการณ์ onstorage แล้วเราจะรู้ได้อย่างไร การเรียกกลับเหตุการณ์ onstorage เช่นเดียวกับฟังก์ชันการเรียกกลับเหตุการณ์อื่นๆ ยังได้รับพารามิเตอร์ออบเจ็กต์เหตุการณ์อีกด้วย มีคุณสมบัติที่มีประโยชน์สามประการในออบเจ็กต์นี้
เมื่อรวมคุณลักษณะหลัก 3 ประการนี้เข้าด้วยกัน เราจะสามารถบรรลุการซิงโครไนซ์ข้อมูลระหว่างเพจต่างๆ ได้
สุดท้ายนี้ ให้ฉันพูดถึงความแตกต่างระหว่าง localStorage และ sessionStorage
ข้อมูลที่จัดเก็บไว้ใน localStorage ไม่มีการตั้งค่าเวลาหมดอายุ และข้อมูลที่จัดเก็บไว้ใน sessionStorage จะถูกล้างเมื่อเซสชันของเพจสิ้นสุดลง
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network