التخزين المحلي html5 كيفية مسحه استخدام localStorage لاحتياجات JavaScript

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

جافا سكريبت

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

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

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

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

// أضف إدخالاً إلى القائمة الموجودة
$("#todos").prepend("

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

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

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

}

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

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

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

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

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

إذا (localStorage.getItem("todos")) (
$("#todos").html(localStorage.getItem("todos"));
}

$("#مسح").انقر(وظيفة() (
window.localStorage.clear();
location.reload();
عودة كاذبة؛
});

دعم المتصفح.

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

خاتمة.

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

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

مشاهدات المشاركة: 475

لقد أرسلت لك مقالًا يحتوي على قصة حول HTML5 LocalStorage في المتصفحات. نعطيه الكلمة.

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

ما هو التخزين المحلي؟

هذا ما يبدو عليه كائن JavaScript:

Var myCar = ( العجلات: 4، الأبواب: 4، المحرك: 1، الاسم: "جاكوار")

وهذا ما يبدو عليه JSON. تمامًا مثل كائن js العادي، يجب وضع جميع الخصائص فقط بين علامتي اقتباس.

( "الاسم الأول": "إيفان"، "الاسم الأخير": "إيفانوف"، "العنوان": ( "عنوان الشارع": "Moskovskoe sh., 101, apt. 101"، "المدينة": "لينينغراد"، "الرمز البريدي": 101101 ), "أرقام الهاتف": [ "812 123-1234", "916 123-4567" ] )

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

في مصطلحات JavaScript، يعد localStorage خاصية لكائن المتصفح العام (نافذة). يمكن الوصول إليه كـ window.localStorage أو ببساطة localStorage.

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

دعونا ننظر إليها على الهواء مباشرة. على سبيل المثال، في Google Chrome، تحتاج إلى فتح DevTools (F12)، والانتقال إلى علامة التبويب "الموارد" وفي الجزء الأيسر سترى التخزين المحلي لهذا النطاق وجميع القيم التي يحتوي عليها.

بالمناسبة، يجب أن تعرف كيف يعمل localStorage مع المجالات. لكل مجال، يقوم متصفحك بإنشاء كائن تخزين محلي خاص به، ولا يمكن تحريره أو عرضه إلا على هذا المجال. على سبيل المثال، لا يمكن للمجال mydomain-1.com الوصول إلى التخزين المحلي الخاص بـ mydomain-2.com .

لماذا أحتاج إلى التخزين المحلي؟

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

كيف أبدأ مع localStorage؟

بسيط جدا.

العمل مع localStorage يشبه إلى حد كبير العمل مع الكائنات في JavaScript. هناك عدة طرق للعمل معها.

localStorage.setItem("مفتاح"، "قيمة")

طريقة تضيف مفتاحًا جديدًا بقيمة إلى localStorage (وإذا كان هذا المفتاح موجودًا بالفعل، فسيتم استبداله بقيمة جديدة). نكتب، على سبيل المثال، localStorage.setItem('myKey', 'myValue');

localStorage.getItem("مفتاح")

نحن نأخذ قيمة محددة من تخزين المفتاح.

localStorage.removeItem("مفتاح")

إزالة المفتاح

localStorage.clear()

مسح كافة وحدات التخزين

يمكنك الآن فتح علامة التبويب localStorage في متصفحك والتدرب على تسجيل البيانات واسترجاعها من وحدة التخزين هذه بنفسك. إذا حدث أي شيء، نكتب كل التعليمات البرمجية في ملف js.

// إضافة أو تغيير القيمة: localStorage.setItem("myKey", "myValue"); // الآن لديك المفتاح "myKey" بالقيمة "myValue" المخزنة في localStorage // أخرجه إلى وحدة التحكم: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //إزالة: localStorage.removeItem("myKey"); // امسح مساحة التخزين بالكامل localStorage.clear() نفس الشيء، فقط مع الأقواس المربعة: localStorage["Key"] = "Value" // تحديد القيمة localStorage["Key"] // الحصول على القيمة، حذف localStorage[" المفتاح"] // إزالة القيمة

أود أيضًا أن أشير إلى أن localStorage يعمل بشكل رائع مع الهياكل المتداخلة، على سبيل المثال، الكائنات.

// إنشاء كائن var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); // قم بتسلسلها localStorage.setItem("myKey", serialObj); // اكتبه إلى وحدة التخزين باستخدام المفتاح "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) // قم بتحليله مرة أخرى ككائن

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

حاول ( localStorage.setItem("key", "value"); ) التقط (e) ( if (e == QUOTA_EXCEEDED_ERR) ( تنبيه("تم تجاوز الحد"); ) )

بدلا من الاستنتاج

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

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

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

ما هو التخزين المحلي؟

كان التخزين المحلي ("تخزين الويب") في الأصل جزءًا من مواصفات HTML5، ولكن تم نقله الآن إلى مواصفات خاصة به. هناك طريقتان لتخزين البيانات:

• التخزين المحلي: التخزين المستمر، وهذا ما سوف نستخدمه.
• تخزين الجلسة: يخزن البيانات لهذه الجلسة فقط، إذا أغلق المستخدم الصفحة، فسيتم فقدان البيانات.

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

لغة البرمجة

لإنشاء قائمة المهام نحتاج إلى:

• إدخال النص لإدخال محتوى العنصر.
• زر لإضافة عنصر إلى القائمة.
• زر لمسح القائمة.
• القائمة نفسها (
  ).
  • وdiv إضافي لإظهار الأخطاء.

  لذلك سيبدو ترميز HTML كما يلي:

  امسح الكل

  بنية بسيطة إلى حد ما سنعيدها إلى الحياة باستخدام JavaScript.

  لأن نحن نستخدم jQuery، نحتاج إلى توصيله بالإضافة إلى ذلك.

  جافا سكريبت

  أولاً، نحتاج إلى تتبع النقر على زر الإضافة والتحقق من أن حقل الإدخال ليس فارغًا:

  $("#add").click(function() ( var description = $("#description").val(); if($("#description").val() == "") ( $( "#تنبيه").html(" تحذير!لقد تركت المهمة فارغة"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

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

  // أدخل الإدخال $("#todos").prepend("

  "+الوصف+"

  "); // احذف كل ما تبقى في حقل النص $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos"، todos )؛ عودة كاذبة ))؛

  للعمل مع التخزين المحلي، يجب عليك توفير المفتاح والقيمة المقابلة له. في حالتنا، دعنا نطلق على المفتاح "todos"، وستكون القيمة هي كل كود HTML الموجود في القائمة (في العلامة

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

  الخطوة التالية هي التحقق من التخزين المحلي، إذا كانت هناك قيمة بالمفتاح "todos"، فقم بتحميل القائمة من التخزين المحلي:

  إذا (localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

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

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

  $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

  مستعد! يبدو الرمز الكامل كما يلي:

  $(document).ready(function() ( $("#add").click(function() ( var description = $("#description").val(); if ($("#description"). val() == "") ( $("#alert").html(" تحذير!لقد تركت المهمة فارغة"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

  • "+الوصف+"
  "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if (localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( );

  دعم المتصفح

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

  خاتمة

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

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

  ما هو التخزين المحلي؟

  يعد تخزين البيانات المحلية جزءًا من شبكة التخزين، والتي تعد في حد ذاتها جزءًا من مواصفات HTML5. هناك خياران لتخزين البيانات في المواصفات:

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

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

  إذا فكرنا في قائمة المهام، فسنحتاج إلى ما يلي:

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

  لذلك يجب أن يبدو HTML الخاص بنا كما يلي:

  امسح الكل

  هذه حاوية HTML قياسية جدًا، ومع JavaScript يمكننا ملء كل شيء بمحتوى ديناميكي.

  وبما أننا سنستخدم JQuery في هذا المثال، فيجب عليك أيضًا تضمينه في مستند HTML الخاص بك.

  جافا سكريبت

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

  $("#add").click(function() ( var description = $("#description").val(); // إذا كانت المهمة فارغة if($("#description").val( ) == "") ( $("#alert").html(" تحذير!لقد تركت المهمة فارغة"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

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

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

  // أضف عنصر القائمة $("#todos").prepend("

  "+الوصف+"

  "); // احذف كل ما هو موجود في الإدخال $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return خطأ شنيع؛

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

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

  // إذا كان لدينا شيء ما في وحدة التخزين المحلية، فقم بوضعه if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

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

  // مسح كافة وحدات التخزين المحلية $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

  يبدو الرمز الكامل كما يلي:
  

  $("#add").click(function() ( var description = $("#description").val(); if($("#description").val() == "") ( $( "#تنبيه").html(" تحذير!لقد تركت المهمة فارغة"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

  "+الوصف+"

  "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if(localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( );

  دعم المتصفح

  يعد دعم تخزين الويب جيدًا جدًا بالنسبة لمواصفات HTML5، وهو مدعوم من قبل جميع المتصفحات الرئيسية وحتى IE8.

  ترجمة: فلاد Merzhevich

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

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

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

  إليك ما نريده حقًا:

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

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

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

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

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

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

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

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

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

  واجهة التخزين (
  احصل عليه عبر getItem(key);
  تعيين عبر setItem(key, data);
  };

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

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

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

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

  var foo = localStorage["bar"];
  // ...
  localStorage["bar"] = foo;

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

  واجهة التخزين (
  إزالة عبر RemoveItem(key);
  واضح()؛
  }

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

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

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

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

  مراقبة منطقة تخزين HTML5

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

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

  إذا (window.addEventListener) (
  window.addEventListener("storage", Handle_storage, false);
  ) آخر (
  window.attachEvent("onstorage", Handle_storage);
  };

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

  وظيفة Handle_storage (ه) (
  إذا (!e) (e = 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;
  ل(فار ط = 0؛ ط< 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، نوع منطقي). بعد ذلك، يتم تكرار جميع القطع (gPieces، ومصفوفة JavaScript) ويتم حفظ صف وعمود لكل منها. يتم بعد ذلك حفظ بعض حالات اللعبة الإضافية، بما في ذلك القطعة المحددة (gSelectedPieceIndex، عدد صحيح)، والقطعة الموجودة في منتصف سلسلة طويلة من القفزات (gSelectedPieceHasMoved، منطقية)، والعدد الإجمالي للتحركات التي تم إجراؤها (gMoveCount، و عدد صحيح).

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

  وظيفة استئناف اللعبة () (
  إذا (! يدعمLocalStorage()) (إرجاع خطأ؛)
  gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
  إذا (!gGameInProgress) (إرجاع خطأ؛)
  gPieces = new Array(kNumPieces);
  ل(فار ط = 0؛ ط< kNumPieces; i++) {
  varrow = parseInt(localStorage["halma.piece." + i + ".row"]);
  var column = parseInt(localStorage["halma.piece." + i + ".column"]);
  gPieces[i] = new Cell(row, column);
  }
  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;

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

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

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

  localStorage["halma.movecount"] = gMoveCount;

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

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

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

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

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

  openDatabase("documents"، "1.0"، "تخزين المستندات المحلية"، 5*1024*1024، الوظيفة (ديسيبل) (
  db.changeVersion(""، "1.0"، الوظيفة (ر) (
  t.executeSql("إنشاء مستندات الجدول (المعرف والاسم)");
  )، خطأ)؛
  });

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

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

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

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

  بالطبع، إذا كنت قد استخدمت أكثر من قاعدة بيانات واحدة في حياتك، فأنت تعلم أن "SQL" هو مصطلح تسويقي أكثر من كونه معيارًا صعبًا وسريعًا (قد يقول البعض الشيء نفسه عن HTML5، لكن هذا لا يهم) . بالطبع، هناك مواصفات SQL حالية (تسمى SQL-92)، ولكن لا يوجد خادم قاعدة بيانات في العالم يتوافق فقط مع هذه المواصفات. يوجد Oracle SQL وMicrosoft 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 * from USERS حيث ACTIVE = "Y"". بدلاً من ذلك، نستخدم الأساليب التي يوفرها مخزن الكائنات لفتح قاعدة بيانات المستخدمين، وتعداد السجلات، وتصفية سجلاتنا، واستخدام أساليب الوصول للحصول على قيمة كل حقل من السجلات المتبقية. يعد الدليل الإرشادي المبكر لـ IndexedDB بمثابة برنامج تعليمي جيد حول كيفية عمل IndexedDB وكيفية مقارنة IndexedDB بـ Web SQL.

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

  ماذا يمكنك أن تفعل كمطور ويب باستخدام IndexedDB؟ في الوقت الحالي، لا يوجد شيء تقريبًا باستثناء بعض العروض التكنولوجية. في سنة؟ ربما.