شرح مفصل لطرق التخزين HTML5 SessionStorage و LocalStorage

التعليق: يتضمن تخزين الويب في HTML5 طريقتين للتخزين: SessionStorage و LocalStorage. يتم استخدام SessionStorage لتخزين البيانات في جلسة محليًا ، والتي لا يمكن الوصول إليها إلا على صفحات في نفس الجلسة وسيتم تدمير البيانات بعد انتهاء الجلسة.

1. الفرق بين تخزين الويب وملفات تعريف الارتباط

يشبه مفهوم تخزين الويب ملفات تعريف الارتباط ، والفرق هو أنه مصمم لتخزين سعة أكبر. حجم ملف تعريف الارتباط محدود ، وفي كل مرة تطلب فيها صفحة جديدة ، سيتم إرسال ملف تعريف الارتباط ، الذي يضيع النطاق الترددي بشكل غير مرئي. بالإضافة إلى ذلك ، يجب تحديد ملف تعريف الارتباط ولا يمكن استدعاؤه عبر المجالات.

بالإضافة إلى ذلك ، يحتوي تخزين الويب على SetItem و GetItem و RemoveItem و Clear وغيرها من الطرق. على عكس ملفات تعريف الارتباط ، يحتاج المطورون الأماميون إلى تغليف setCookies و GetCookies أنفسهم.

لكن ملفات تعريف الارتباط لا غنى عنها أيضًا: تتمثل وظيفة ملفات تعريف الارتباط في التفاعل مع الخادم وتوجد كجزء من مواصفات HTTP ، بينما يتم إنشاء تخزين الويب فقط لتخزين البيانات محليًا (تصحيح من otakustay)

2. حالة دعم المتصفح لتخزين الويب HTML5

باستثناء IE7 وأقل ، تدعمها متصفحات قياسية أخرى بالكامل (أي و FF تحتاج إلى التشغيل على خادم الويب). تجدر الإشارة إلى أن IE تقوم دائمًا بأشياء جيدة. على سبيل المثال ، يعد UserData في IE7 و IE6 حلاً للتخزين المحلي لـ JavaScript. من خلال تغليف رمز بسيط ، يمكن توحيد جميع المتصفحات التي تدعم تخزين الويب.

لتحديد ما إذا كان المتصفح يدعم LocalStorage ، يمكنك استخدام الكود التالي:

تنبيه ("استعراض دعم LocalStorage")

}

آخر

{

التنبيه ("التصفح لا يدعم LocalStorage")

}

// أو if (typeof window.localStorage == 'undefined') {Alert ("Browsing لا يدعم LocalStorage")}

3.

يتمتع كل من LocalStorage و SessionStorage بنفس طرق التشغيل ، مثل SetItem و GetItem و RemoveItem ، إلخ.

طرق LocalStorage و SessionStorage:

SetItem قيمة تخزين

الغرض: قيمة المتجر في حقل المفتاح

الاستخدام: .setitem (المفتاح ، القيمة)

مثال رمز:

localstorage.setitem ("الموقع" ، "js8.in") ؛

الحصول على قيمة الحصول على قيمة

الغرض: احصل على القيمة المخزنة محليًا في المفتاح المحدد

الاستخدام: .getItem (مفتاح)

مثال رمز:

var site = localStorage.getItem ("site") ؛

removeItem Delete Key

الغرض: حذف القيمة المخزنة محليًا في المفتاح المحدد

الاستخدام:. الإصلاح (المفتاح)

مثال رمز:

LocalStorage.RemoveItem ("الموقع") ؛

مسح كل المفتاح/القيمة

الغرض: مسح كل القيم/القيم

الاستخدام: .clear ()

مثال رمز:

localstorage.clear () ؛

4. طرق التشغيل الأخرى: تشغيل نقطة و []

لا يمكن لتخزين الويب استخدام SetItem الخاص به ، GetItem ، وما إلى ذلك لتسهيل الوصول ، ولكن أيضًا استخدام مشغل DOT (.) و [] لتخزين البيانات مثل الكائنات العادية ، مثل الرمز التالي:

var storage = window.localStorage ؛ Storage.Key1 = "Hello" ؛

التخزين ["key2"] = "World" ؛

console.log (Storage.Key1) ؛

console.log (التخزين ["key2"]) ؛

5. يتم تنفيذ خصائص المفتاح والطول لـ LocalStorage و SessionStorage

يمكن بسهولة تنفيذ المفتاح () والطول الذي توفره SessionStorage و LocalStorage بسهولة ، مثل الكود التالي:

var storage = window.localStorage ؛

لـ (var i = 0 ، len = storage.length ؛ i <len ؛ i ++)

{

var key = storage.key (i) ؛

var value = storage.getItem (key) ؛

console.log (key + "=" + value) ؛

}

6. أحداث التخزين

يوفر التخزين أيضًا أحداث التخزين. عندما تتغير القيمة الرئيسية أو مسحها ، يمكن تشغيل حدث التخزين. على سبيل المثال ، يضيف الكود التالي تغييرات حدث للتخزين:

Window.AdDeventListener ("التخزين" ، handle_storage ، false) ؛

}

آخر إذا (window.attachevent)

{

window.attachevent ("onStorage" ، handle_storage) ؛

}

دالة handle_storage (e) {

if (! e) {e = window.event ؛}

}

الخصائص المحددة لكائن حدث التخزين هي كما يلي:

PropertyTypedescription

مفتاح مفتاح تم إضافته أو إزالته أو تعديله

oldvalueanythe القيمة السابقة (الآن مكتوبة) ، أو فارغة إذا تمت إضافة عنصر جديد

newvalueanythe القيمة الجديدة ، أو لاغية إذا تمت إضافة عنصر

url/uristring the page التي تسمى الطريقة التي أثارت هذا التغيير