كيفية استخدام localStorage في JavaScript

توفر آلية التخزين المحلي نوعًا من كائن تخزين الويب الذي يتيح لك تخزين البيانات واستردادها في المتصفح. يمكنك تخزين البيانات والوصول إليها دون انتهاء الصلاحية ؛ ستكون البيانات متاحة حتى بعد أن يغلق الزائر موقعك.

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

ما هو localStorage في جافا سكريبت؟

يعد كائن localStorage جزءًا من واجهة برمجة تطبيقات تخزين الويب التي تدعمها معظم متصفحات الويب. يمكنك تخزين البيانات كأزواج من المفاتيح والقيمة باستخدام localStorage. يجب أن تكون المفاتيح والقيم الفريدة بتنسيق UTF-16 DOM String.

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

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

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

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

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

كيف يعمل LocalStorage؟

يمكنك الوصول إلى وظيفة التخزين المحلي من خلال ملف Window.localStorage منشأه. توفر هذه الخاصية عدة طرق مثل setItem () و getItem () و removeItem (). يمكنك استخدام هذه لتخزين وقراءة وحذف أزواج المفاتيح / القيمة.

كيفية تخزين البيانات في localStorage

يمكنك تخزين البيانات في LocalStorage باستخدام ملف setItem () طريقة. تقبل هذه الطريقة وسيطتين ، المفتاح والقيمة المقابلة.

window.localStorage.setItem ('بايثون', 'جويدو فان روسوم');

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

نافذة او شباك.localStorage.setItem ('Python'، 'Guido van Rossum') ؛
مقدار ثابت الطالب = {
 الاسم: "يوفراج" ،
 علامات: 85,
 الموضوع: "التعلم الآلي"
}
مقدار ثابت عشرات = [76, 77, 34, 67, 88];
نافذة او شباك.localStorage.setItem ("نتيجة"، جسون.stringify (طالب)) ؛
نافذة او شباك.localStorage.setItem ("العلامات" ، جسون.stringify (عشرات)) ؛

كيف تقرأ البيانات من localStorage

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

يترك البيانات 1 = نافذة او شباك.localStorage.getItem ('Python') ؛
يترك البيانات 2 = نافذة او شباك.localStorage.getItem ("نتيجة") ،
وحدة التحكم.log (data1) ؛
وحدة التحكم.log (data2) ؛

ينتج عن هذا الناتج التالي:

جويدو فان روسوم
{"اسم":"يوفراج","علامات":85,"موضوعات":"التعلم الالي"}

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

يترك البيانات 2 = جسون.parse (نافذة او شباك.localStorage.getItem ('نتيجة')) ؛
وحدة التحكم.log (data2) ؛

كيفية حذف جلسات التخزين المحلية

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

window.localStorage.removeItem ('بايثون');
window.localStorage.removeItem ('C ++');

كيفية مسح جميع العناصر في localStorage

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

نافذة او شباك.التخزين المحلي.صافي();

كيفية البحث عن طول التخزين المحلي

يمكنك معرفة طول localStorage باستخدام ملف localStorage.length منشأه.

يترك len = localStorage.length ؛
وحدة التحكم.log (len) ؛

كيفية الحصول على المفتاح في موقف معين

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

يترك د = localStorage.key (1);
وحدة التحكم.log (د) ؛

تُستخدم طريقة key () بشكل أساسي للتكرار خلال جميع العناصر الموجودة في localStorage.

كيفية تنفيذ حلقة عبر جميع العناصر في localStorage

يمكنك تكرار جميع العناصر في localStorage باستخدام حلقة for.

إلى عن على (يترك أنا = 0; i يترك المفتاح = localStorage.key (i) ؛
يترك القيمة = localStorage.getItem (مفتاح) ؛
وحدة التحكم.log (مفتاح ، قيمة) ؛
}

يقبل الأسلوب key () الفهرس كوسيطة ويعيد المفتاح المقابل. يقبل أسلوب getItem () المفتاح كوسيطة ويعيد القيمة المقابلة. أخيرًا ، console.log () طريقة طباعة زوج مفتاح القيمة.

مشروع جافا سكريبت بسيط يعتمد على التخزين المحلي

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

يخترع index.html و script.js ملف في مجلد جديد وافتح الملفات في محرر التعليمات البرمجية المفضل لديك. استخدم كود HTML التالي لإنشاء واجهة لتطبيق عداد النقاط:

<! DOCTYPE html>
<لغة البرمجة>
<هيئة>
<h1>localStorage في جافا سكريبت</h1>
<زر onclick ="زيادة عداد ()" اكتب ="زر">زيادة النتيجة</button>
<زر onclick ="إنقاص عداد ()" اكتب ="زر">تقليل النتيجة</button>
<زر onclick ="clearCounter ()" اكتب ="زر">مسح localStorage</button>
<ص>نتيجة:</ ص>
<ع معرف ="نتيجة"></ ص>
<ص>اضغط على "زيادة النتيجة" زر لزيادة عدد النقاط</ ص>
<ص>اضغط على "تقليل النتيجة" زر لتقليل عدد النقاط</ ص>
<ص>اضغط على "مسح localStorage" زر لمسح LocalStorage</ ص>
<ص>
 يمكنك إغلاق علامة تبويب المتصفح (أو نافذة او شباك)، و محاولة تكرارا.
 سترى أن البيانات لا تزال قائمة وهوليس خسر حتى بعد الإغلاق
 المتصفح.
</ ص>
<النصي src ="script.js"></script>
</body>
</html>

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

وظيفةزيادة() {
فار العد = رقم(نافذة او شباك.localStorage.getItem ("count")) ؛
 العد + = 1 ؛
 window.localStorage.setItem ("عدد"، عدد)؛
 document.getElementById ("نتيجة") .innerHTML = count؛
}

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

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

وظيفةتقليل() {
فار العد = رقم(نافذة او شباك.localStorage.getItem ("count")) ؛
 العد - = 1 ؛
 window.localStorage.setItem ("عدد"، عدد)؛
 document.getElementById ("نتيجة") .innerHTML = count؛
}

ال إنقاص عداد () تسترجع الوظيفة وتتحقق من البيانات تمامًا مثل زيادة عداد () يفعل. إنها تنقص عدد متغير بمقدار 1 ، والذي يتم تعيينه افتراضيًا على 0.

وظيفةclearCounter() {
نافذة او شباك.التخزين المحلي.صافي();
 document.getElementById ("نتيجة") .innerHTML = "";
}

آخر ، clearCounter () تقوم الوظيفة بحذف جميع البيانات من localStorage باستخدام امتداد صافي() طريقة.

افعل المزيد مع localStorage

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

هل تريد إنشاء مشروع JavaScript محلي آخر يعتمد على التخزين؟ إليك تطبيق قائمة مهام أساسي يمكنك تطويره باستخدام HTML و CSS و JavaScript.