شرح مفصل لملخص عدة طرق تخزين للواجهة الأمامية HTML5

الوضع العام

قبل H5 ، تم استخدام التخزين بشكل رئيسي مع ملفات تعريف الارتباط. عيوب ملفات تعريف الارتباط مع بيانات على رأس الطلب ، والحجم هو ضمن 4K. اللورد المجال تلوث.

التطبيقات الرئيسية: عربة التسوق ، تسجيل الدخول إلى العملاء

بالنسبة لمتصفح IE ، هناك userData ، الحجم هو 64 كيلو بايت ، مدعوم فقط من قبل متصفح IE.

هدف

1. حل مشكلة 4K
2. حل مشكلة رأس الطلب مع معلومات التخزين
3. مشكلة حل التخزين العلائقي
4. متصفح

1. التخزين المحلي المحلي

طريقة التخزين:

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

مقاس:

كل اسم مجال 5 أمتار

وضع الدعم:

ملاحظة: لا يدعم IE9 LocalStorage الملفات المحلية.

طريقة الكشف:

 if (if (window.localStorage) {Alert ('هذا المتصفح يدعم LocalStorage') ؛} آخر {Alert ('هذا المتصفح لا يدعم LocalStorage') ؛}

API المشترك:

GetItem // خذ السجلات

سجل الإعدادات SetItiten //

removeItem // إزالة السجل

المفتاح // خذ القيمة المقابلة للمفتاح

Clear // Clear Records

محتوى التخزين:

صفيف ، صور ، json ، النمط ، السيناريو. جوهر جوهر (طالما أنه يمكن تسلسله في محتوى سلسلة ، يمكن تخزينه)

2.

API LocalStorage في HTML5 هو نفسه SessionStorage.

3. ذاكرة التخزين المؤقت متصل (ذاكرة التخزين المؤقت للتطبيق)

الملف المطلوب لتطبيقات ذاكرة التخزين المؤقت المحلية

كيفية استخدام:

① تكوين ملف البيان

صفحة:

 <!

ملف واضح:

ملف البيان هو ملف نصي بسيط يخبر المتصفح أن محتوى ذاكرة التخزين المؤقت (والمحتوى الذي لا يخبأ).

يمكن تقسيم الملفات الواضحة إلى ثلاثة أجزاء:

① بيان ذاكرة التخزين المؤقت -الملف المدرج في هذا العنوان سوف يخبئ بعد التنزيل الأول

②network -يجب توصيل الملفات المدرجة تحت هذا العنوان بالخادم دون أن يتم تخزينها مؤقتًا

③ الاحتياطية -تنص الملفات المدرجة على هذا العنوان على أن صفحات التراجع عندما لا يمكن الوصول إلى الصفحة (مثل الصفحة 404)

العرض التوضيحي الكامل:

 بيان ذاكرة التخزين المؤقت# 2016-07-24 v1.0.0/theme.css/main.jsnetwork: login.jsp Froprack: /html//offline.html

على الخادم: يحتاج ملف البيان إلى تكوين نوع MIME الصحيح ، أي النص/ذاكرة التخزين المؤقت.

مثل Tomcat:

 <mime-mapping> <extension> بيان </extension> <mime-type> text/cache-manifest </mime-type> </mime-mapping >>

API المشترك:

الأساسية هو كائن ApplicationCache.

0 (غير مقصود): لا مخبأ ، أي أنه لا يوجد تطبيق ذاكرة التخزين المؤقت

1 (الخمول): IDLE ، أي أنه لم يتم تحديث ذاكرة التخزين المؤقت للتطبيق

2 (التحقق): أثناء الشيك ، يتم تنزيل ملف الوصف والتحقق من التحديث

3 (تنزيل): في التنزيل ، تقوم ذاكرة التخزين المؤقت للتطبيق بتنزيل المورد المحدد في ملف الوصف

4 (Updateready): تم تحديثه ، تم تنزيل جميع الموارد

5 (الخمول): تم التخلي عنه ، أي ملف وصف ذاكرة التخزين المؤقت للتطبيق لم يعد موجودًا ، لذلك لا يمكن للصفحة الوصول إلى ذاكرة التخزين المؤقت

الأحداث ذات الصلة:

يشير إلى التغييرات في تطبيق تطبيق ذاكرة التخزين المؤقت:

التحقق: يتم تشغيله عندما يبحث المتصفح عن ذاكرة التخزين المؤقت للتطبيق

خطأ: الزناد عند إرسال خطأ أثناء التحقق أو تنزيل الموارد

NoupDate: يتم تشغيله عند التحقق من ملف الوصف ووجد أنه لم يتم تغيير الملف

تنزيل: تم تشغيله عند تنزيل تطبيق موارد ذاكرة التخزين المؤقت

التقدم: تم تشغيله بشكل مستمر في عملية تنزيل تطبيق تنزيل الملف

updateready: تنزيل ذاكرة التخزين المؤقت الجديدة للتطبيق على محفزات الصفحة

مؤقتًا: المشغلات عند اكتمال ذاكرة التخزين المؤقت

ثلاث مزايا للتطبيق ذاكرة التخزين المؤقت:

① تصفح متصل

② زيادة سرعة دخل الوجه للصفحة

③ تقليل ضغط الخادم

ملحوظة:

1.

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

3. اقتبس يجب أن يكون HTML من البيان هو نفسه ملف البيان ، تحت نفس المجال

4. سيقوم المتصفح تلقائيًا بتخزين ملف HTML لملف البيان ، والذي يتسبب في تحديث إصدار التحديث إذا تم تغيير محتوى HTML.

5. ذاكرة التخزين المؤقت في ملف البيان لا علاقة له بالشبكة والتراجع.

6. يجب أن تكون الموارد في الاحتياط هي نفس ملف البيان

7. بعد تحديث الإصدار ، يجب تحديثه مرة واحدة لإطلاق الإصدار الجديد (سيتم تنظيف حالة الصفحة مرة واحدة) ، ويجب إضافة إصدار المراقبة للحدث.

8. حتى لو لم يتم إعداد الصفحات الأخرى في الموقع ، يمكن الوصول إلى مورد الطلب من ذاكرة التخزين المؤقت في ذاكرة التخزين المؤقت

9. عندما يتغير ملف البيان ، فإن طلب المورد نفسه سيؤدي أيضًا إلى تحديث التحديث

الفرق بين ذاكرة التخزين المؤقت في وضع عدم الاتصال وذاكرة التخزين المؤقت للمتصفح التقليدي:

1. ذاكرة التخزين المؤقت في وضع عدم الاتصال هي للتطبيق بأكمله

2. يمكنك فتح الصفحة إذا كان لديك انقطاع ذاكرة التخزين المؤقت في وضع عدم الاتصال.

3. يمكن لذاكرة التخزين المؤقت في وضع عدم الاتصال إخطار المتصفح بنشاط بتحديث الموارد

4.web SQL

قاعدة البيانات العلائقية ، الوصول من خلال بيان SQL

API قاعدة بيانات Web SQL ليست جزءًا من مواصفات HTML5 ، لكنها مواصفات مستقلة ، حيث تقدم مجموعة من واجهات برمجة التطبيقات التي تستخدم SQL لتشغيل قواعد بيانات العميل.

وضع الدعم:

يمكن أن تعمل قاعدة بيانات الويب SQL في أحدث إصدار من Safari و Chrome و Opera Browser.

الطريقة الأساسية:

①pendatabase: تستخدم هذه الطريقة قواعد البيانات الحالية أو قواعد البيانات الجديدة لإنشاء كائن قاعدة بيانات.

②transaction: تتيح لنا هذه الطريقة التحكم في المعاملة وإجراء التقديم أو التراجع بناءً على هذا الموقف.

③ ينفذ: يتم استخدام هذه الطريقة لأداء استعلامات SQL الفعلية.

افتح قاعدة البيانات:

 var db = opendatabase ('mydb' ، '1.0' ، 'test db' ، 2 * 1024 * 1024 ، fn) ؛ // opendatabase () 方法对应的五个参数分别为 ： 数据库名称、版本号、描述文本、 数据库名称、版本号、描述文本、 حجم قاعدة البيانات ، رد الاتصال

تنفيذ عملية الاستعلام:

 var db = opendatabase ('mydb' ، '1.0' ، 'test db' ، 2 * 1024 * 1024) ؛

إدراج البيانات:

 var db = opendatabase ('mydb' ، '1.0' ، 'test db' ، 2 * 1024 * 1024) ؛ 1 ، Winty) ') ؛

قراءة البيانات:

 db.transaction (function (tx) {tx.executesql ('select * from win' ، [] ، function (tx ، results) {var len = results.rows.length ، msg = <p> Query Record: +len +</p> ؛ }}، باطل)؛})؛

يمكن ملاحظة ذلك من هذه العمليات التي تستخدم بيانات SQL بشكل أساسي لإجراء العمليات المتعلقة بقاعدة البيانات.

5.EndexedDB

API قاعدة بيانات الفهرس (مفهرس) (كجزء من HTML5) مفيدة لإنشاء تطبيق ويب HTML5 دون اتصال مع بيانات تخزين كثيفة البيانات. في الوقت نفسه ، يساعد أيضًا بيانات ذاكرة التخزين المؤقت المحلية ، بحيث يمكن لتطبيقات الويب التقليدية عبر الإنترنت (مثل تطبيقات الويب للجوال) تشغيلها بشكل أسرع.

API غير المتزامن:

معظم العمليات في مفهرسة Dexed لا هي طرق الاتصال الشائعة الاستخدام لدينا ، مع إرجاع نتائج النتيجة ، ولكن طريقة الاستجابة للطلب ، مثل فتح قاعدة البيانات

وبهذه الطريقة ، عندما فتحنا قاعدة البيانات ، قمنا بالفعل بإعادة كائن DB ، وكان هذا الكائن نتيجة. كما يتضح من الشكل أعلاه ، باستثناء النتيجة. العديد من السمات المهمة هي onerror ، onsuccess ، onupgradeneed (عندما نطلب رقم الإصدار من قاعدة البيانات ورقم إصدار قاعدة البيانات الحالي غير متسق). هذا مشابه لطلب AJAX لدينا. بعد أن بدأنا هذا الطلب ، لم نتمكن من تحديد متى كان ناجحًا ، لذلك نحتاج إلى معالجة بعض المنطق في رد الاتصال.

قم بإيقاف تشغيل وحذف:

 دالة مغلقة (db) {db.close () ؛} دالة deletedb (name) {indexeddb.deletedatabase (name) ؛}

تخزين البيانات:

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

يمكننا استخدام حقل محدد في كل سجل كقيم مفتاح (Keypath) ، أو استخدام رقم توليد تلقائي كقيم مفتاح (Keygenrator) ، أو غير محدد. أنواع مختلفة من اختيار المفاتيح ، يمكن أيضًا تخزين بنية البيانات التي يمكن تخزينها.

ما سبق هو كل محتويات هذا المقال.