عادةً ما يكون إنشاء تطبيق المهام هو أول تطبيق تتعلمه في كيفية إنشاء جافا سكريبت ، ولكن المشكلة في جميع هذه التطبيقات هي أنه عند إعادة تحميل الصفحة ، تختفي جميع تلك المهام.
هناك حل بسيط على الرغم من ذلك ، وهذا لاستخدام التخزين المحلي. والشيء الجيد في التخزين المحلي هو أنه يمكنك حفظ هذه البتات من البيانات على جهاز الكمبيوتر الخاص بالمستخدم بحيث أنه عند إعادة تحميل الصفحة ، ستبقى كل ما تحتاجه هناك ، كما أن التخزين المحلي في الواقع بسيط للغاية عندما يتعلق الأمر بحفظ البيانات وصنعها متوفرة على الصفحة.
التخزين المحلي هو جزء من مساحة التخزين على الويب ، والذي يعد في حد ذاته جزءًا من مواصفات HTML5. هناك خياران لتخزين البيانات في المواصفات:
بعبارة بسيطة ، كل تخزين الويب هذا هو مخزن يدعى أزواج المفاتيح / القيمة محليًا وعلى عكس ملفات تعريف الارتباط ، تستمر هذه البيانات حتى إذا قمت بإغلاق المتصفح أو إيقاف تشغيل الكمبيوتر.
إذا فكرنا في قائمة ما يجب علينا القيام به:
لذا يجب أن تبدو HTML على النحو التالي:
إنها عبارة عن عنصر HTML مناسب تمامًا ، ومع جافا سكريبت لدينا يمكننا ملء كل ذلك بمحتوى ديناميكي.
بما أننا سنستخدم jQuery في هذا المثال ، فيجب عليك أيضًا تضمينه في مستند HTML.
إذا فكرنا في بنية تطبيق بسيط للمهام ، فإن أول ما يتعين علينا القيام به هو التحقق عند قيام المستخدم بالنقر فوق زر إضافة والتحقق مما إذا كان الإدخال يحتوي على قيمة فارغة ، مثل:
$('#add').click( function() {var Description = $('#description').val();//if the to-do is emptyif($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}كل ما فعلناه هو التحقق من وجود نقرة على زر الإضافة وتشغيل اختبار بسيط للتحقق مما إذا كان المستخدم قد ملأ الإدخال بشيء ما. إذا لم يكن الأمر كذلك ، فسيختفي تنبيه التنبيهات ويبقى لمدة 1000 مللي ثانية ثم يتلاشى. وأخيرًا ، نعرض false حتى لا يقرأ المتصفح بقية النص البرمجي ولا يزال يضيف عنصر القائمة.
والشيء التالي الذي نحتاج إلى القيام به هو إدراج عنصر قائمة مع القيمة في المدخلات وسنقوم باعداد هذا الأمر بشكل مسبق حتى عندما يضيف المستخدم ما يجب فعله ، فسيتم دائمًا الانتقال إلى بداية القائمة ثم حفظ عنصر القائمة هذا التخزين المحلي ، مثل:
// add the list item$('#todos').prepend("" + Description + " ");// delete whatever is in the input$('#form')[0].reset();var todos = $('#todos').html();localStorage.setItem('todos', todos);return false;});كما يمكنك أن ترى في jQuery قياسية جدًا وعندما يتعلق الأمر بالتخزين المحلي ، نحتاج إلى حفظ مفتاح وقيمة. المفتاح هو اسم وضعناه لأنفسنا ، وفي هذه الحالة ، أطلقنا عليه اسم "todos" ، ثم نحتاج إلى تحديد ما نريد فعلاً حفظه ، وفي هذه الحالة كل HTML الذي يتم وضعه داخل قائمة todos unordered . كما ترون ، لقد أمسكنا فقط باستخدام jQuery وأعيدنا في النهاية خطأً كاذبًا حتى لا يتم إرسال النموذج ولا يتم إعادة تحميل صفحتنا.
خطوتنا التالية هي التحقق مما إذا كان لدينا شيء ما على التخزين المحلي المحفوظة بالفعل في أجهزتنا ، وإذا كنا نحتاج إلى وضع ذلك في الصفحة ، فمنذ أن أعطينا مفتاحنا تودوس الاسم ، نحتاج إلى التحقق من وجوده كما هو الحال:
// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}استخدمنا عبارة بسيطة إذا كانت للتحقق ثم نحصل على ما لدينا على التخزين المحلي ونضعه في شكل HTML لقائمة المهام غير مرتبة.
إذا قمت باختبار التطبيق البسيط الخاص بنا وقمنا بإعادة تحميل الصفحة التي نرى أنها تعمل بالفعل وكل ما تبقى لنا هو إنشاء وظيفة عندما يختار المستخدم مسح كل المهام ؛ عندما يحدث ذلك ، سنمسح جميع سعة التخزين المحلية ، ونعيد تحميل الصفحة لتصبح التغييرات نافذة المفعول ، ثم تُرجع خطأً لمنع التجزئة من عنوان url كما يلي:
// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});مع هذا القيام لدينا لدينا التطبيق يعمل بشكل كامل. يشبه الرمز الكامل هذا:
$('#add').click( function() {var Description = $('#description').val();if($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;} $ ( '# لجميع الناس "). أرفقت (" "+ وصف +" ") ؛ $ ('# form') [0] .reset ()؛ var todos = $ ('# todos'). html ()؛ localStorage.setItem ('todos'، todos)؛ return false؛})؛ إذا (localStorage.getItem ( 'لجميع الناس')) {$('#todos').html(localStorage.getItem('todos'));} $ ('# clear') انقر فوق (function () {window.localStorage.clear ()؛ location.reload ()؛ return false؛})؛ يعد دعم تخزين الويب جيدًا لمواصفات HTML5 ؛ وهي مدعومة من قبل جميع المتصفحات الرئيسية وحتى IE8 ، لذا فإن الشيء الوحيد الذي قد تحتاج إلى توخي الحذر منه هو IE7 إذا كنت لا تزال تدعم ذلك.
يمكن للتخزين المحلي في التطبيقات الصغيرة مثل هذا أن يرحب ببدائل قواعد البيانات. لا يحتاج تخزين كميات صغيرة من البيانات إلى التعقيد.
كيف تقوم بتخزين البيانات من JavaScript؟ هل تفضل ملفات تعريف الارتباط أو قواعد البيانات للتخزين المحلي؟ اسمحوا لنا أن نعرف في التعليقات.