ملخص استخدام localStorage و sessionStorage

تمت إضافة ميزة تخزين محلي جديدة في HTML5. تُستخدم هذه الميزة بشكل أساسي كتخزين محلي لحل مشكلة عدم كفاية مساحة تخزين ملفات تعريف الارتباط (مساحة تخزين كل ملف تعريف ارتباط في ملف تعريف الارتباط هي 4 كيلو بايت). الحجم المدعوم للمتصفحات المحلية هو 5 ميجابايت سيكون هذا التخزين المحلي مختلفًا في المتصفحات المختلفة.

1. يقوم localStorage بتوسيع حد 4K لملفات تعريف الارتباط

2. يمكن لـ LocalStorage تخزين البيانات المطلوبة محليًا مباشرة، وهذا يعادل قاعدة بيانات 5M للصفحة الأمامية، ويمكنه حفظ النطاق الترددي، ولكن هذا متاح فقط في المتصفحات المتطورة التي يدعمها Zhongcai

1. المتصفحات ليست موحدة الحجم، وسمة localStorage مدعومة فقط في إصدارات IE الأعلى من IE8.

2. حاليًا، تحدد جميع المتصفحات نوع قيمة التخزين المحلي بنوع السلسلة، وهذا يتطلب بعض التحويل لأنواع كائنات JSON اليومية الشائعة.

3. LocalStorage غير قابل للقراءة في وضع خصوصية المتصفح.

4. يقوم LocalStorage بشكل أساسي بقراءة السلاسل إذا قمت بتخزين الكثير من المحتوى، فسوف يستهلك مساحة من الذاكرة ويتسبب في توقف الصفحة.

5. لا يمكن لبرامج الزحف الزحف إلى localStorage

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

هنا نستخدم localStorage للتحليل

دعم المتصفح للتخزين المحلي:

بيان خاص هنا هو أنه إذا كنت تستخدم متصفح IE، فسيتم استخدام UserData كمخزن. والتفسير الرئيسي هنا هو محتوى localStorage، لذلك لن يتم شرح بيانات المستخدم كثيرًا، وفي رأي المدون الشخصي، لا يوجد. من الضروري تعلم استخدام بيانات المستخدم، لأن IE6/IE7 الحالي في مرحلة الإزالة، والعديد من تطوير الصفحات اليوم يتضمن تقنيات ناشئة مثل HTML5/CSS3، لذلك لا نستخدمها بشكل عام من أجل التوافق

أولاً، عند استخدام localStorage، نحتاج إلى تحديد ما إذا كان المتصفح يدعم سمة localStorage.

 if(!window.localStorage){ تنبيه (يدعم المتصفح التخزين المحلي) return false }else{ // الأعمال المنطقية الرئيسية};

هناك ثلاث طرق للكتابة إلى localStorage هنا سوف نقدمها واحدة تلو الأخرى.

 if(!window.localStorage){ تنبيه (المتصفح يدعم التخزين المحلي)؛ }else{ var Storage=window.localStorage; // اكتب تخزين الحقل c.setItem(c,3); console.log(typeof Storage[a]); التخزين [ج])؛ }

والنتيجة بعد التشغيل هي كما يلي:

تجدر الإشارة هنا إلى أن استخدام localStorage يتبع أيضًا سياسة نفس المصدر، لذلك لا يمكن لمواقع الويب المختلفة مشاركة نفس localStorage بشكل مباشر.

النتيجة النهائية المطبوعة على وحدة التحكم هي:

لا أعرف ما إذا كان أي من القراء قد لاحظ أن ما تم تخزينه للتو كان من النوع int، ولكن تمت طباعته كنوع من السلسلة. ويرتبط هذا بخصائص LocalStorage نفسها التي تدعم تخزين نوع السلسلة فقط.

قراءة التخزين المحلي

 if(!window.localStorage){ تنبيه (المتصفح يدعم التخزين المحلي)؛ }else{ var Storage=window.localStorage; // اكتب تخزين الحقل[a]=1; اكتب تخزين الحقل c.setItem(c,3); console.log(typeof Storage[a]); console.log(typeof Storage[b]); Storage[c]); // تقرأ الطريقة الأولى var a=storage.a; console.log(a); // الطريقة الثانية تقرأ var b=storage[b]; تقرأ الطريقة الثالثة var c=storage.getItem(c); console.log(c });

هناك ثلاث طرق لقراءة localStorage. الطرق الموصى بها رسميًا هي getItem/setItem للوصول إليها. لا تسألني عن السبب، لأنني لا أعرف.

لقد قلت من قبل أن localStorage يعادل قاعدة بيانات أمامية. تتكون قاعدة البيانات بشكل أساسي من أربع خطوات: الإضافة والحذف والاستعلام. القراءة والكتابة هنا تعادل خطوتين الإضافة والاستعلام.

الآن دعونا نتحدث عن خطوتين حذف وتعديل localStorage.

إن تغيير هذه الخطوة أسهل في الفهم. الفكرة هي نفس تغيير قيمة المتغير الشامل. هنا سوف نستخدم مثالاً لشرح ذلك بإيجاز.

 if(!window.localStorage){ تنبيه (المتصفح يدعم التخزين المحلي)؛ }else{ var Storage=window.localStorage; اكتب حقل التخزين c.setItem(c,3); console.log(storage.a); Storage[b]); // console.log(typeof Storage[c]);

على وحدة التحكم، يمكننا أن نرى أن المفتاح a قد تم تغييره إلى 4.

حذف التخزين المحلي

1. امسح جميع محتويات التخزين المحلي

 var Storage=window.localStorage; Storage.a=1;

2. احذف زوجًا من القيمة الرئيسية في localStorage

 var Storage=window.localStorage; Storage.a=1;

عرض النتائج على وحدة التحكم

الحصول على مفتاح التخزين المحلي

 var Storage=window.localStorage; Storage.a=1; سجل (مفتاح) }

استخدم طريقة المفتاح () للحصول على المفتاح المقابل عن طريق الدخول والخروج من الفهرس.

4. اعتبارات أخرى للتخزين المحلي

بشكل عام، سنقوم بتخزين JSON في localStorage، لكن localStorage سيقوم تلقائيًا بتحويل localStorage إلى نموذج سلسلة.

في هذا الوقت يمكننا استخدام طريقة JSON.stringify() لتحويل JSON إلى سلسلة JSON

مثال:

 if(!window.localStorage){ تنبيه (المتصفح يدعم التخزين المحلي)؛ }else{ var Storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; =JSON.stringify(data); Storage.setItem(data,d);

بعد القراءة، لتحويل سلسلة JSON إلى كائن JSON، استخدم طريقة JSON.parse()

 var Storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; / تحويل سلسلة JSON إلى إخراج كائن JSON var json=storage.getItem(data); jsonObj);

المطبوعة هي كائن كائن

شيء آخر يجب ملاحظته هو أنه يجب تحويل الأنواع الأخرى عند قراءتها.