نموذج التعليمات البرمجية لتنفيذ الاتصال بين الصفحات باستخدام أحداث التخزين

نعلم جميعًا أنه يجب استيفاء الشرطين التاليين لتشغيل window.onstorage:

• حفظ (تحديث) وحدة تخزين من خلال localStorage.setItem أو sessionStorage.setItem
• عند حفظ (تحديث) هذا التخزين، يجب أن تكون قيمته الجديدة مختلفة عن القيمة السابقة

الشرط الثاني أعلاه، ببساطة، هو: إما تهيئة التخزين، لأن التخزين غير موجود، وقيمته فارغة، أو هو تحديث للتخزين الموجود.

مثال:

 // تهيئة Storagewindow.localStorage.setItem('a', 123); // تسجيل حدث التخزين window.onstorage = (e) => { console.log(e);}; // تحديث Storagewindow.localStorage.setItem(' أ'، 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>// تشغيل حدث التخزين window.localStorage.setItem('a', new Date().getTime());</script>

طالما تم التأكد من فتح الصفحة c بعد الصفحتين a وb (حتى لو لم تكن الصفحات الثلاث في نفس نافذة المتصفح، فأنت بحاجة إلى التمييز بين النافذة وصفحة علامة التبويب)، ثم أحداث onstorage في الصفحات سيتم تشغيل a وb.

الآن بعد أن عرفنا كيفية استخدام أحداث التخزين لتحقيق الاتصال بين الصفحات، ما فائدة هذا الاتصال بالنسبة لنا؟

في الواقع، نحتاج فقط إلى معرفة أي عملية تحديث للتخزين أدت إلى حدوث حدث onstorage، فكيف نعرف ذلك؟ رد اتصال الحدث onstorage، مثل وظائف رد الاتصال الأخرى للحدث، يتلقى أيضًا معلمة كائن الحدث. هناك ثلاث خصائص مفيدة في هذا الكائن وهي:

• key الاسم الرئيسي للتخزين الذي يتم تهيئته أو تحديثه
• oldValue هي القيمة قبل تهيئة التخزين أو تحديثه.
• newValue هي القيمة بعد التخزين الذي تمت تهيئته أو تحديثه

من خلال الجمع بين هذه السمات الرئيسية الثلاثة، يمكننا تحقيق مزامنة البيانات بين الصفحات

وأخيرا، اسمحوا لي أن أذكر الفرق بين localStorage وsessionStorage

لا تحتوي البيانات المخزنة في localStorage على إعداد لوقت انتهاء الصلاحية، وسيتم مسح البيانات المخزنة في sessionStorage عند انتهاء جلسة الصفحة.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.