التخزين المحلي. يتطلب استخدام localStorage لجافا سكريبت تخزينًا محليًا لملفات تعريف الارتباط

ملفات تعريف الارتباط التي قمنا بتحليلها في الدرس السابق محدودة للغاية: يمكن أن يكون هناك 4096 حرفًا فقط في ملف تعريف ارتباط واحد ، ويمكن أن يكون عدد ملفات تعريف الارتباط لكل مجال حوالي 30-50 حسب المتصفح. لذلك ، للأسف ، لن يكون من الممكن تخزين الكثير من المعلومات هناك. لقد حدث ذلك تاريخيا.

للتغلب على هذا القيد ، ظهر بديل لملفات تعريف الارتباط في المتصفحات - يطلق عليه اسم التخزين المحلي. في التخزين المحلي ، يمكننا تخزين 5-10 ميغا بايت من المعلومات أو حتى أكثر لفترة طويلة.

العمل مع التخزين المحلي

الغرض من كائن localStorage المدمج في المتصفح هو العمل مع التخزين المحلي. لديها 4 طرق سهلة الفهم. ها هم:

// تخزين القيمة: localStorage.setItem ("المفتاح" ، "القيمة") ؛ // احصل على القيمة: var value = localStorage.getItem ("Key") ؛ // إزالة القيمة: localStorage.removeItem ("Key") ؛ // امسح كل مساحة التخزين: localStorage.clear () ؛

مع التخزين المحلييمكنك أيضًا العمل كمصفوفة عادية:

// تخزين القيمة: localStorage ["Key"] = "القيمة" ؛ // احصل على القيمة: var value = localStorage ["Key"] ؛ // Delete value: احذف localStorage ["Key"] ؛

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

أمثلة على

في المثال التالي سنكتب اسم المستخدم للتخزين المحلي:

LocalStorage.setItem ("الاسم" ، "إيفان") ؛

بعد فترة ، سنعيد هذا الاسم:

تنبيه (localStorage.getItem ("الاسم")) ؛

كما ترى ، لا يوجد شيء معقد هنا ، كل شيء أبسط بكثير من نفس العمل مع ملفات تعريف الارتباط.

إنقاذ الأشياء

التخزين المحلي غير قادر على تخزين كائنات ومصفوفات JavaScript ، على الرغم من أن هذا غالبًا ما يكون مناسبًا. ولكن هناك طريقة - تحتاج إلى إجراء تسلسل لهذه البيانات في تنسيق JSON - تحصل على سلسلة يمكن تخزينها بالفعل في localStorage. ثم ، عندما نحتاج إلى استعادة هذا الكائن - تحويل السلسلة من JSON مرة أخرى إلى كائن - واستخدامها بهدوء.

دعنا نلقي نظرة على هذه العملية بمثال. تسلسل الكائن وحفظه في التخزين المحلي:

// إعطاء كائن: var obj = (الاسم: "Ivan"، arr :)؛ // تسلسلها إلى "(" الاسم ":" إيفان "،" arr ":)": var json = JSON.stringify (obj) ؛ // الكتابة إلى localStorage باستخدام مفتاح obj: localStorage.setItem ("obj" ، json) ؛

بعد فترة ، نعيد الجسم:

// احصل على البيانات من localStorage كـ JSON: var json = localStorage.getItem ("obj") ؛ // قم بتحويلها مرة أخرى إلى كائن JavaScript: var obj = JSON.parse (json) ؛ console.log (obj) ؛

ميزات إضافية

تحديد عدد السجلات في المخزن: alert (localStorage.length).

تحديد اسم المفتاح برقمه: alert (localStorage.key (number)).

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

function func (event) (var key = event.key ؛ // مفتاح البيانات التي يتم تغييرها var oldValue = event.oldValue ؛ // قيمة قديمة var newValue = event.newValue ؛ // new value var storageArea = event.storageArea ؛ // منطقة التخزين)

يضيف. مواد

تخزين المصفوفة في التخزين المحلي: https://youtu.be/sYUILPMnrIo

ما العمل التالي:

ابدأ في حل المشكلات على الرابط التالي: مهام الدرس.

عندما تقرر كل شيء ، انتقل إلى دراسة موضوع جديد.

الدرس لا.
قائمة التشغيل على يوتيوب
ES6 عملي

قد تتقدم بعض مقاطع الفيديو على أنفسنا ، نظرًا لأننا لم نمر بكل ES6 إلى هذا المكان في البرنامج التعليمي. ما عليك سوى تخطي مقاطع الفيديو هذه ومشاهدتها لاحقًا.

نظرة عامة على تخزين الويب

على الإنترنت ، يمكن تخزين المعلومات في مكانين: على خادم الويب وعلى عميل الويب (أي كمبيوتر زائر الصفحة). من الأفضل تخزين أنواع معينة من البيانات في أحد هذه الأماكن وأنواع أخرى في مكان آخر.

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

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

قبل HTML5 ، كانت الطريقة الوحيدة لتخزين البيانات محليًا هي استخدام آلية الملف بسكويتالذي تم تصميمه في الأصل لتبادل كميات صغيرة من معلومات التعريف بين خوادم الويب والمتصفحات. تعد ملفات تعريف الارتباط مثالية لتخزين كميات صغيرة من البيانات ، ولكن نموذج JavaScript للعمل معها غير مرغوب فيه إلى حد ما. يجبر نظام ملفات تعريف الارتباط المطور أيضًا على العبث بتواريخ انتهاء الصلاحية وإرسال البيانات بلا فائدة ذهابًا وإيابًا عبر الإنترنت مع كل طلب صفحة.

يقدم HTML5 بديلاً أفضل لملفات تعريف الارتباط ، مما يجعل تخزين المعلومات على كمبيوتر الزائر أمرًا سهلاً وبسيطًا. يمكن تخزين هذه المعلومات على جهاز الكمبيوتر العميل إلى أجل غير مسمى ، ولا يتم إرسالها إلى خادم الويب (ما لم يقم المطور بذلك بنفسه) ، ويمكن أن تكون كبيرة ولا تتطلب سوى كائنين من عناصر JavaScript البسيطة والفعالة للعمل معها.

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

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

لا يتم تخزين المعلومات المخزنة في تخزين الويب فعليًا على الإنترنت ، ولكن على جهاز الكمبيوتر الخاص بزائر صفحة الويب. بمعنى آخر ، تخزين الويب لا يعني تخزين البيانات على الإنترنت ، ولكن تخزين البيانات من الإنترنت.

هناك نوعان من التخزين على الويب ، يرتبطان بطريقة ما بكائنين:

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

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

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

مخزن بيانات الجلسة

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

من وجهة نظر رمز صفحة الويب ، يعمل كل من التخزين المحلي وتخزين بيانات الجلسة بالطريقة نفسها تمامًا. الاختلاف الوحيد في مدة تخزين البيانات.

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

يرتبط كل من التخزين المحلي وتخزين الجلسة بنطاق موقع الويب. وبالتالي ، إذا قمت بحفظ البيانات لصفحة www..html في التخزين المحلي ، فستتوفر هذه البيانات لصفحة www..html ، حيث كلتا الصفحتين لهما نفس المجال. لكن هذه البيانات لن تكون متاحة لصفحات المجالات الأخرى.

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

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

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

حفظ البيانات

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

تكون صيغة حفظ جزء كبير من البيانات كما يلي:

localStorage = البيانات ؛

// JS localStorage ["اسم المستخدم"] = "إيفان بيتروف" ؛

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

تخزين الويب سيتم حفظ هذا النص في التخزين المحلي:
سيتم حفظ هذا النص في مخزن بيانات الجلسة:

Function saveData () (// احصل على قيم مربعات النص var localData = document.getElementById ("localData"). Value؛ var sessionData = document.getElementById ("sessionData"). Value؛ // Save the text الذي تم إدخاله في مربع النص في التخزين المحلي localStorage ["localData"] = localData ؛ // احفظ النص الذي تم إدخاله في حقل النص في جلسة تخزين الجلسة البيانات من المخزن var localData = localStorage ["localData"] ؛ var sessionData = sessionStorage ["sessionData"] ؛ // اعرض هذه البيانات في الحقول النصية إذا (localData! = null) (document.getElementById ("localData"). القيمة = localData؛) if (sessionData! = null) (document.getElementById ("sessionData"). value = sessionData؛))

تحتوي الصفحة على مربعي نص: للتخزين المحلي (أعلى) وتخزين الجلسة (أسفل). يؤدي النقر فوق الزر "حفظ" إلى حفظ النص الذي تم إدخاله في حقول النص ، والنقر فوق الزر "تحميل" يعرض البيانات المحفوظة المقابلة في الحقول.

يدعم التخزين على الويب أيضًا بناء جملة الملكية الأقل شيوعًا. وفقًا لقواعد بناء الجملة هذا ، نشير إلى موقع التخزين المسمى اسم المستخدم باسم localStorage.username ، وليس localStorage ["اسم المستخدم"]. كلا النوعين من بناء الجملة متكافئان ، واستخدام أحدهما أو الآخر هو مسألة تفضيل شخصي.

تخزين الويب لا يعمل بدون خادم الويب

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

هذه الميزة هي أحد الآثار الجانبية للطريقة التي تخصص بها المتصفحات مساحة التخزين المحلية. كما ذكرنا سابقًا ، تقصر المستعرضات التخزين المحلي لكل موقع على 5 ميجابايت من خلال ربط كل صفحة تريد استخدام التخزين المحلي بنطاق موقع الويب.

ماذا يحدث عندما تفتح صفحة تستخدم تخزين الويب من محرك الأقراص الثابتة المحلي لديك؟ كل هذا يتوقف على المتصفح. المستعرض متصفح الانترنتيبدو أنه يفقد دعم تخزين الويب بالكامل. تختفي كائنات localStorage و sessionStorage ومحاولة استخدامها تؤدي إلى ظهور خطأ JavaScript.

في Firefox ، تظل كائنات التخزين المحلي و sessionStorage في مكانها ويبدو أنها مدعومة (حتى أن Modernizr تكتشف أنها مدعومة) ، ولكن كل شيء يتم إرساله إلى التخزين يختفي دون أن يعرف أحد مكانه. الخامس متصفح كروممرة أخرى ، هناك شيء مختلف - تعمل معظم وظائف تخزين الويب كما ينبغي ، لكن بعض الميزات (على سبيل المثال ، حدث onStorage) لا تعمل.

تظهر مشاكل مماثلة مع File API. لذلك ، فإنك توفر على نفسك الكثير من المتاعب إذا وضعت الصفحة قيد الاختبار على خادم اختبار لتجنب كل هذه الالتباسات.

دعم تخزين الويب بواسطة المتصفحات

يعد Web Storage أحد ميزات HTML5 الأكثر دعمًا ، مع مستوى جيد من الدعم في كل متصفح رئيسي. يوضح الجدول أدناه الحد الأدنى من إصدارات المتصفحات الرئيسية التي تدعم تخزين الويب:

توفر كل هذه المتصفحات إمكانية تخزين البيانات المحلية والجلسات. ولكن لدعم حدث onStorage ، يلزم وجود إصدارات أحدث من المتصفحات ، مثل IE 9 أو Firefox 4 أو Chrome 6.

الأكثر إشكالية هو IE 7 ، والذي لا يدعم تخزين الويب على الإطلاق. كحل بديل ، يمكنك محاكاة تخزين الويب باستخدام ملفات تعريف الارتباط. هذا ليس حلاً مثاليًا حقًا ، لكنه يعمل. على الرغم من عدم وجود نص برمجي رسمي لسد هذه الفجوة ، يمكن العثور على بعض نقاط البداية الجيدة على صفحة HTML5 Cross Browser (ضمن "Web Storage").

ترجمة المقال: كيفية استخدام التخزين المحلي لجافا سكريبت.
سارة فييرا.

غالبًا ما يبدأ الإلمام بأساسيات برمجة JavaScript بإنشاء أبسط التطبيقات ، مثل الكمبيوتر الدفتري الإلكتروني ، الذي نستخدمه لتسجيل الأشياء والأحداث التي يمكننا نسيانها. لكن مثل هذه التطبيقات لديها مشكلة واحدة - بعد إعادة تحميل الصفحة ، تختفي قائمة جميع السجلات المتبقية سابقًا ، أي أن التطبيق يعود إلى حالته الأصلية.

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

ما هو لوكال ستوريج؟

إنه محرك تخزين محلي يعد جزءًا من تقنية Web Storage كما هو محدد في مواصفات HTML5. هناك خياران للتخزين تسمح بهما هذه المواصفات:

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

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

لغة البرمجة

إذا التزمنا بمثالنا الذي نريد إنشاء نسخة إلكترونية فيه دفتر، ثم يتم عرض جميع المكونات اللازمة لتنفيذه أدناه:

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

نتيجة لذلك ، يجب أن تبدو الترميز الخاصة بنا على النحو التالي:

هذا قالب HTML قياسي جدًا يمكننا ملؤه بالمحتوى الذي تم إنشاؤه ديناميكيًا باستخدام JavaScript.

جافا سكريبت

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

$ ("# add"). انقر فوق (function () (
// إذا كان حقل النص فارغًا
$ ("# alert"). html (" انتباه!أدخل الإدخال في النص
حقل.")؛
عودة كاذبة؛
}

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

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

// إضافة إدخال إلى القائمة الحالية
$ ("# todos"). prepend ("

"+ الوصف +"

");
// امسح حقل الإدخال
$ ("# form"). reset ()؛

عودة كاذبة؛
});

كما لاحظت ، لا يوجد شيء غير عادي هنا ، يتم استخدامه الإصدار القياسيكود jQuery. عند الوصول إلى كائن التخزين المحلي ، يجب أن نشير إلى البيانات التي نحفظها في شكل مفتاح / قيمة. يمكن استخدام اسم تعسفي للمفتاح ، وقمت بتسميته "todos"، ثم نحتاج إلى الإشارة إلى ما نحتاج في الواقع إلى الاحتفاظ به في الذاكرة. في هذه الحالة ، هو جزء كامل من ترميز HTML مضمن في قائمة غير مرتبة (موجودة بين العلامات) تعرض جميع السجلات التي تم إدخالها مسبقًا بواسطة المستخدم. من الكود ، يمكنك أن ترى أننا ببساطة نستخرج الجزء الذي نحتاجه باستخدام طريقة jQuery .html () وفي النهاية ، بعد إكمال جميع الإجراءات اللازمة ، نقوم بتعيين قيمة الإرجاع للوظيفة على false ، مما يمنع النموذج البيانات من إرسالها ، وبالتالي إعادة تحميل صفحتنا.

الآن ، لنفترض أن مستخدمنا قد أدخل عدة إدخالات سابقًا وللتشغيل العادي للتطبيق ، نحتاج إلى التحقق مما إذا كانت هناك معلومات مخزنة على الكمبيوتر في localStorage ، وإذا كان الأمر كذلك ، فقم بعرضها للمستخدم. نظرًا لأن اسم مفتاحنا هو "todos" ، يجب علينا التحقق من وجوده على النحو التالي:

// إذا كانت هناك بالفعل بيانات في التخزين المحلي ، فقم بعرضها

}

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

إذا اختبرت تطبيقك الأبسط ، فستجد أنه بعد إعادة تحميل الصفحة ، يبقى كل شيء في مكانه. والآن ، آخر ما يتبقى لنا هو إنشاء وظيفة يمكن للمستخدم ، إذا لزم الأمر ، حذف جميع تسجيلاته. يتم تحقيق ذلك عن طريق مسح localStorage وإعادة تحميل الصفحة لتنشيط التغييرات التي تم إجراؤها. بعد ذلك ، كما في الحالة السابقة ، قمنا بتعيين false كقيمة إرجاع للوظيفة ، مما يمنع التجزئة من الظهور في عنوان URL. ( * ولا يقوم بالتمرير لأعلى الصفحة.):

// التنظيف الكامل localStorage
window.localStorage.clear () ،
location.reload () ؛
عودة كاذبة؛
});

نتيجة لذلك ، لدينا تطبيق يعمل بشكل كامل. وبتجميع جميع المقتطفات المذكورة أعلاه معًا ، نحصل على رمز التطبيق الكامل:

$ ("# add"). انقر فوق (function () (
var الوصف = $ ("# description"). val ()؛
إذا ($ ("# description"). val () == "") (
$ ("# alert"). html (" انتباه!أدخل الدخول في
مجال التحرير مكان كتابة النص.")؛
$ ("# alert"). fadeIn (). delay (1000) .fadeOut ()؛
عودة كاذبة؛
}
$ ("# todos"). prepend ("

"
+ الوصف + "

");
$ ("# form"). reset ()؛
var todos = $ ("# todos"). html ()؛
localStorage.setItem ("todos"، todos) ؛
عودة كاذبة؛
});

if (localStorage.getItem ("todos")) (
$ ("# todos"). html (localStorage.getItem ("todos"))؛
}

$ ("# clear"). انقر فوق (function () (
window.localStorage.clear () ،
location.reload () ؛
عودة كاذبة؛
});

دعم المتصفح.

توفر مواصفات HTML5 دعمًا قويًا جدًا لتقنية Web Storage ، والتي يتم تنفيذها أيضًا بواسطة معظم المتصفحات الشائعة ، حتى IE8. يظل IE7 هو المشكلة الوحيدة إذا كنت لا تزال مهتمًا.

استنتاج.

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

* ملاحظة المترجم.

المشاهدات بعد: 475

ترجمة: فلاد Merzhevich

التخزين المحلي المستمر هو أحد المجالات التي تستفيد فيها تطبيقات العميل من تطبيقات الخادم. لتطبيقات مثل نظام التشغيل، يوفر طبقة تجريد لتخزين واسترجاع البيانات مثل الإعدادات أو حالة التنفيذ. يمكن تخزين هذه القيم في التسجيل أو ملفات INI أو ملفات XML أو في أي مكان آخر وفقًا لمبادئ النظام الأساسي. إذا كان تطبيق العميل الخاص بك يحتاج إلى تخزين محلي لأكثر من مجرد زوج مفتاح / قيمة ، فيمكنك إدراج قاعدة البيانات الخاصة بك ، أو الخروج بتنسيق الملف الخاص بك ، أو أي عدد من الحلول الأخرى.

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

يتم تضمين ملفات تعريف الارتباط في كل طلب HTTP ، مما يؤدي إلى إبطاء تطبيق الويب الخاص بك من إرسال نفس البيانات مرارًا وتكرارًا دون داع.
يتم تضمين ملفات تعريف الارتباط في كل طلب HTTP عند نقل البيانات عبر الإنترنت في شكل غير مشفر (حتى إذا تم نقل تطبيق الويب بالكامل عبر SSL) ؛
ملفات تعريف الارتباط محدودة بحوالي 4 كيلوبايت من البيانات - وهو ما يكفي لإبطاء تطبيقك (انظر أعلاه) ، ولكنها ليست كافية لتكون مفيدة.

هذا ما نريده حقًا:

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

قبل HTML5 ، فشلت جميع المحاولات لتحقيق ذلك في نهاية المطاف بطرق مختلفة.

تاريخ موجز للتخزين المحلي قبل HTML5

في البداية ، كان هناك متصفح Internet Explorer واحد فقط. على الأقل ، أرادت Microsoft أن يعتقد العالم ذلك. تحقيقا لهذه الغاية ، في إطار الأول الحرب العظمىالمتصفحات لقد اخترعت Microsoft الكثير من الأشياء ودمجتها في متصفحها الذي انتهى الحرب - Internet Explorer. كان أحد هذه الأشياء يسمى سلوكيات DHTML ، وأحد هذه السلوكيات يسمى userData.

تسمح UserData لصفحة الويب بتخزين ما يصل إلى 64 كيلوبايت من البيانات لكل مجال في بنية هرمية تشبه XML. يمكن أن تخزن المجالات الموثوقة مثل مواقع الإنترانت عشرة أضعاف ذلك. مهلاً ، يجب أن تكون 640 كيلوبايت كافية للجميع. لم يوفر IE أي طريقة لتغيير هذه الاصطلاحات ، لذلك لا توجد طريقة لزيادة حجم الذاكرة المتاحة.

في عام 2002 ، قدمت Adobe ميزة في Flash 6 ، والتي تبين أنها مؤسفة وذات اسم مضلل - "ملفات تعريف الارتباط الفلاش". في بيئة Flash ، تُعرف هذه الإمكانية باسم الكائنات المشتركة المحلية (LSOs). باختصار ، يسمح لكائنات الفلاش بتخزين ما يصل إلى 100 كيلوبايت من البيانات لكل مجال. أطلق براد نيوبيرج ، الذي طور نموذجًا أوليًا مبكرًا للجسر بين فلاش وجافا سكريبت ، اسم AMASS (نظام التخزين الضخم AJAX) ، لكنه كان محدودًا بسبب بعض المراوغات في تصميم الفلاش. بحلول عام 2006 ، مع إدخال ExternalInterface في Flash 8 ، أصبح الوصول إلى LSOs عبر JavaScript أمرًا أسهل وأسرع. أعاد براد كتابة AMASS ودمجه في مجموعة أدوات Dojo الشهيرة تحت الاسم المستعار dojox.storage. يمنح الفلاش "المجاني" مساحة تخزين تبلغ 100 كيلوبايت لكل مجال. بالإضافة إلى ذلك ، فإنه يطالب المستخدم بزيادة سعة التخزين بترتيب من حيث الحجم عند الطلب (1 ميجابايت ، 10 ميجابايت ، إلخ).

إذا (Modernizr.localstorage) (
// window.localStorage متاح!
) آخر (
// لا يوجد دعم أصلي لتخزين HTML5
}

استخدام تخزين HTML5

يعتمد تخزين HTML5 على أسماء أزواج المفاتيح / القيمة. تقوم بتخزين المعلومات بناءً على اسم المفتاح ، وبعد ذلك يمكنك استرداد تلك البيانات بنفس المفتاح. اسم المفتاح هو سلسلة. يمكن أن تكون البيانات من أي نوع تدعمه JavaScript ، بما في ذلك السلاسل أو القيم المنطقية أو الأعداد الصحيحة أو أرقام الفاصلة العائمة. ومع ذلك ، في الواقع ، يتم تخزين البيانات كسلسلة. إذا كنت تقوم بحفظ واسترداد غير السلاسل ، فستحتاج إلى استخدام وظائف مثل parseInt () أو parseFloat () لترجمة البيانات الناتجة إلى أنواع JavaScript صالحة.

واجهة التخزين (
احصل عليه عبر getItem (مفتاح) ؛
مجموعة عبر setItem (مفتاح ، بيانات) ؛
};

سيؤدي استدعاء setItem () باستخدام اسم مفتاح موجود إلى الكتابة فوق القيمة السابقة بصمت. سيؤدي استدعاء getItem () باستخدام مفتاح غير موجود إلى إرجاع NULL بدلاً من طرح استثناء.

مثل كائنات JavaScript الأخرى ، يمكنك الإشارة إلى كائن localStorage كمصفوفة ترابطية. بدلاً من استخدام أساليب getItem () و setItem () ، يمكنك ببساطة تحديد أقواس مربعة... على سبيل المثال ، هذا الجزء من الكود

var foo = localStorage.getItem ("bar") ،
// ...
localStorage.setItem ("bar"، foo) ؛

يمكن إعادة كتابتها باستخدام تركيب الأقواس المربعة:

var foo = localStorage ["شريط"] ؛
// ...
localStorage ["bar"] = foo؛

هناك أيضًا طرق لحذف القيم حسب اسم المفتاح ، بالإضافة إلى مسح المتجر بالكامل (أي حذف جميع المفاتيح والقيم في نفس الوقت).

واجهة التخزين (
إزالة عن طريق removeItem (مفتاح) ؛
صافي ()؛
}

لن يؤدي استدعاء removeItem () باستخدام مفتاح غير موجود إلى إرجاع أي شيء.

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

واجهة التخزين (
الطول
الحصول على مفتاح (عدد صحيح غير سالب) ؛
}

إذا لم يكن الفهرس في النطاق من 0 إلى (length-1) عند استدعاء المفتاح () ، فستُرجع الدالة قيمة خالية.

تتبع مساحة تخزين HTML5

إذا كنت ترغب في تتبع تغييرات التخزين برمجيًا ، فيجب عليك التقاط حدث التخزين. يتم تشغيل هذا الحدث على كائن النافذة عندما يتم استدعاء setItem () أو removeItem () أو clear () وتغيير شيء ما. على سبيل المثال ، إذا قمت بتعيين قيمة حالية أو قمت باستدعاء clear () في حالة عدم وجود مفاتيح ، فلن يتم إطلاق الحدث لأن مساحة التخزين لم تتغير بالفعل.

يتم دعم حدث التخزين في أي مكان يعمل فيه كائن التخزين المحلي ، بما في ذلك Internet Explorer 8. لا يدعم IE 8 معيار W3C addEventListener (على الرغم من أنه سيتم إضافته أخيرًا في IE 9) ، لذلك يجب عليك التحقق من محرك الحدث للقبض على حدث التخزين يدعم المتصفح (إذا قمت بذلك من قبل مع أحداث أخرى ، فيمكنك تخطي هذا القسم حتى النهاية). يعمل اعتراض حدث التخزين بنفس طريقة اعتراض الأحداث الأخرى. إذا كنت تفضل استخدام jQuery أو بعض مكتبات JavaScript الأخرى لتسجيل معالجات الأحداث ، فيمكنك القيام بذلك من خلال التخزين أيضًا.

إذا (window.addEventListener) (
window.addEventListener ("التخزين" ، handle_storage ، خطأ) ؛
) آخر (
window.attachEvent ("onstorage"، handle_storage)؛
};

سيتم استدعاء رد الاتصال handle_storage باستخدام كائن StorageEvent ، ما عدا في Internet Explorer ، حيث يتم تخزين الأحداث في window.event.

وظيفة handle_storage (هـ) (
إذا (! ه) (ه = window.event ؛)
}

في هذه الحالة ، سيكون e كائن StorageEvent له الخصائص المفيدة التالية.

* ملاحظة: كانت خاصية url تسمى في الأصل uri وقد دعمت بعض المتصفحات هذه الخاصية قبل تغيير المواصفات. لتحقيق أقصى قدر من التوافق ، يجب عليك التحقق مما إذا كانت خاصية url موجودة ، وإذا لم تكن كذلك ، فتحقق من خاصية uri بدلاً من ذلك.

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

القيود في المتصفحات الحالية

عند الحديث عن تاريخ التخزين المحلي مع المكونات الإضافية لجهات خارجية ، ذكرت قيود كل تقنية. تذكرت أنني لم أقل شيئًا عن قيود تخزين HTML5 القياسي الآن. سأقدم لك الإجابات وبعد ذلك سأشرحها. الإجابات ، مرتبة حسب الأهمية ، هي "5 ميغا بايت" و "QUOTA_EXCEEDED_ERR" و "لا".

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

"QUOTA_EXCEEDED_ERR" هو الاستثناء الذي تحصل عليه إذا تجاوزت حصتك البالغة 5 ميغابايت. "لا" هي الإجابة على السؤال الواضح التالي: "هل يمكنني مطالبة المستخدم بمساحة تخزين أكبر؟" في وقت كتابة هذا التقرير ، لم تنفذ المتصفحات أي آلية لمطوري الويب لطلب مساحة تخزين أكبر. تسمح بعض المتصفحات (مثل Opera) للمستخدم بالتحكم في حصص التخزين لكل موقع ، ولكن هذه مبادرة مستخدم بحتة وليست شيئًا يمكنك ، كمطور ، تضمينه في تطبيق الويب الخاص بك.

تخزين HTML5 قيد العمل

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

كيف تعمل؟ في كل مرة يحدث تغيير في اللعبة ، سنسمي هذه الوظيفة.

وظيفة saveGameState () (

localStorage ["halma.game.in.progress"] = gGameInProgress؛
لـ (var i = 0 ؛ i< kNumPieces; i++) {
localStorage ["halma.piece." + i + ".row"] = gPieces [i] .row؛
localStorage ["halma.piece." + i + ".column"] = gPieces [i] .column؛
}
localStorage ["halma.selectedpiece"] = gSelectedPieceIndex؛
localStorage ["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved؛
localStorage ["halma.movecount"] = gMoveCount ؛
العودة صحيح
}

كما ترى ، يتم استخدام كائن localStorage لحفظ عملية اللعبة (gGameInProgress ، و boolean). بعد ذلك ، يتم تكرار جميع الرموز (gPieces ، مصفوفة JavaScript) ويتم تخزين صف وعمود لكل منها. بعد ذلك ، يتم حفظ بعض حالات اللعبة الإضافية ، بما في ذلك القطعة المحددة (gSelectedPieceIndex ، عدد صحيح) ، والقطعة الموجودة في منتصف سلسلة طويلة من القفزات (gSelectedPieceHasMoved ، منطقية) والعدد الإجمالي للحركات التي تم إجراؤها (gMoveCount ، عدد صحيح) .

عندما يتم تحميل الصفحة ، بدلاً من استدعاء وظيفة newGame () تلقائيًا ، والتي ستعيد جميع المتغيرات إلى قيمها الأصلية ، فإننا نطلق على استئناف اللعبة (). تستخدم الوظيفة () () (سيرة ذاتية إلى تخزين HTML5 للتحقق من حالة اللعبة في التخزين المحلي. إذا كان موجودًا ، فإنه يستعيد القيم باستخدام كائن localStorage.

وظيفة استئناف لعبة () (
if (! supportLocalStorage ()) (إرجاع خطأ؛)
gGameInProgress = (localStorage ["halma.game.in.progress"] == "true") ؛
if (! gGameInProgress) (إرجاع false؛)
gPieces = صفيف جديد (kNumPieces) ؛
لـ (var i = 0 ؛ i< kNumPieces; i++) {
var row = parseInt (localStorage ["halma.piece." + i + ".row"]) ؛
var العمود = parseInt (localStorage ["halma.piece." + i + ".column"]) ؛
gPieces [i] = خلية جديدة (صف ، عمود) ؛
}
gNumPieces = kNumPieces ؛
gSelectedPieceIndex = parseInt (localStorage ["halma.selectedpiece"]) ؛
gSelectedPieceHasMoved = localStorage ["halma.selectedpiecehasmoved"] == "true" ؛
gMoveCount = parseInt (localStorage ["halma.movecount"]) ؛
drawBoard () ؛
العودة صحيح
}

أهم جزء في هذه الوظيفة هو التحذير الذي ذكرته سابقًا في هذا الفصل وسأكرره هنا: يتم تخزين البيانات كسلاسل. إذا كنت تقوم بتخزين شيء آخر غير السلاسل ، فأنت بحاجة إلى تحويلها عند الاستلام. على سبيل المثال ، العلم بأن اللعبة قيد التقدم (gGameInProgress) هو نوع منطقي. في وظيفة saveGameState () ، نقوم فقط بتخزينها ولا تقلق بشأن نوع البيانات.

localStorage ["halma.game.in.progress"] = gGameInProgress؛

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

gGameInProgress = (localStorage ["halma.game.in.progress"] == "true") ؛

وبالمثل ، يتم تخزين عدد الحركات في gMoveCount كعدد صحيح ، في وظيفة saveGameState () نقوم ببساطة بحفظها.

localStorage ["halma.movecount"] = gMoveCount ؛

ولكن في () () (سيرة ذاتية ، يتعين علينا تحويل القيمة إلى عدد صحيح باستخدام وظيفة parseInt () المضمنة في JavaScript.

gMoveCount = parseInt (localStorage ["halma.movecount"]) ؛

ما وراء زوج المفتاح / القيمة: الرؤية التنافسية

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

رؤية واحدة هي اختصار تعرفه بالفعل - SQL. في عام 2007 ، أطلقت Google برنامج Gears ، وهو مكون إضافي عبر المستعرضات مفتوح المصدر مصدر الرمزوالذي يتضمن قاعدة بيانات مضمنة تستند إلى SQLite. أثر هذا النموذج الأولي في وقت لاحق على إنشاء مواصفات قاعدة بيانات SQL على الويب. توفر قاعدة بيانات SQL على الويب (المعروفة سابقًا باسم "WebDB") غلافًا رفيعًا حول قاعدة البيانات بيانات SQL، والذي يتيح لك القيام بالأشياء التالية من JavaScript:

openDatabase ("المستندات" ، "1.0" ، "تخزين المستندات المحلي" ، 5 * 1024 * 1024 ، الوظيفة (ديسيبل) (
db.changeVersion ("" ، "1.0" ، الوظيفة (t) (
t.executeSql ("CREATE TABLE docids (id، name)")؛
)، خطأ)؛
});

كما ترى ، فإن معظم الإجراءات تتماشى مع طريقة ExecuteSQL. يمكن أن تدعم هذه السلسلة أي أمر SQL ، بما في ذلك SELECT و UPDATE و INSERT و DELETE. إنه يشبه برمجة قواعد البيانات من جانب الخادم ، إلا أنك تفعل ذلك باستخدام JavaScript! يا للفرح!

تم تنفيذ مواصفات Web SQL Database عبر أربعة متصفحات ومنصات.

دعم قاعدة بيانات SQL على الويب

بمعنى آخر	ثعلب النار	سفاري	كروم	أوبرا	ايفون	ذكري المظهر
–	–	4.0+	4.0+	10.5+	3.0+	2.0+

بالطبع ، إذا كنت قد استخدمت أكثر من قاعدة بيانات واحدة في حياتك ، فأنت تعلم أن "SQL" مصطلح تسويقي أكثر من كونه معيارًا صارمًا وسريعًا (قد يقول شخص ما الشيء نفسه عن HTML5 ، لكن هذا لا يهم ). بالطبع ، هناك مواصفات SQL مُحدّثة (تسمى SQL-92) ، ولكن لا يوجد خادم قاعدة بيانات في العالم يتوافق فقط مع هذه المواصفات. يوجد Oracle SQL ، مايكروسوفت SQL، SQL في MySQL ، SQL في PostgreSQL ، SQL في SQLite. في الواقع ، يضيف كل من هذه المنتجات منتجات جديدة بمرور الوقت. وظائف SQL، لذلك حتى قول "SQL في SQLite" لا يكفي. يجب أن تقول "إصدار SQL الذي يأتي مع إصدار SQLite X.Y.Z".

كل هذا يقودنا إلى التحذير التالي ، الموجود حاليًا في الجزء العلوي من مواصفات Web SQL.

المواصفات في طريق مسدود: جميع المطورين المهتمين يستخدمون SQL من جانب الخادم (SQLite) ، لكننا نحتاج إلى عدة تطبيقات مستقلة للتحرك على مسار التقييس. في حين أن المطورين الآخرين مهتمون بتنفيذ هذه المواصفات ، فقد تم ترك وصف لهجة SQL كمرجع منتظم لـ Sqlite ، وهو أمر غير مقبول بالنسبة للمعيار.

في ظل هذه الخلفية ، سأشارك معك رؤية تنافسية أخرى للتخزين المحلي المتقدم والدائم لتطبيقات الويب: واجهة برمجة تطبيقات قاعدة البيانات المفهرسة ، المعروفة سابقًا باسم "WebSimpleDB" ، والتي تسمى الآن بمودة IndexedDB.

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

إذا سبق لك أن قمت ببرمجة قواعد بيانات SQL ، فمن المحتمل أن تكون هذه المصطلحات مألوفة لك. الاختلاف الرئيسي هو أن تخزين الكائنات لا يحتوي على لغة استعلام منظمة. أنت لا تكتب شرطًا مثل "SELECT * من المستخدمين حيث يكون ACTIVE =" Y "". بدلاً من ذلك ، يستخدم الطرق التي يوفرها ملف تخزين العناصر لفتح قاعدة بيانات USERS ، وتعداد السجلات ، وتصفية سجلاتنا ، واستخدام طرق الوصول للحصول على قيمة كل حقل من السجلات المتبقية. يعد الدليل الإرشادي المبكر لـ IndexedDB دليلاً جيدًا حول كيفية عمل IndexedDB ومقارنة IndexedDB بـ Web SQL.

في وقت كتابة هذا التقرير ، لم يتم تطبيق IndexedDB إلا في النسخة التجريبية من Firefox 4. في المقابل ، صرحت Mozilla أنها لن تطبق Web SQL مطلقًا. قالت Google إنها تدرس دعم IndexedDB لكل من Chromium و جوجل كروم... وحتى مايكروسوفت قالت إن IndexedDB "رائعة للويب".

ماذا يمكنك أن تفعل كمطور ويب باستخدام IndexedDB؟ تشغيل هذه اللحظةعمليا لا شيء سوى بعض مظاهرات التكنولوجيا. في سنة؟ ربما.