طرق التعامل مع التخزين المحلي local storage

التعامل مع التخزين المحلي Local Storage بسيط ويتم من خلال زوج من القيم (key/value):

لحفظ البيانات، يتم استخدام التابع setItem ونمرر له متغيّرين من نمط string، المفتاح key و البيانات التي نرغب بتخزينها:

localStorage.setItem(key, value);

//مثال
localStorage.setItem('username', 'Tom');

أما استعادة البيانات المخزنة تتم من خلال التابع getItem ونمرر له المفتاح السابق:

const myUsername = localStorage.getItem('username');

console.log(myUsername); // سيتم طباعة Tom

لحذف بيانات محددة (مفتاح معيّن) نستخدم التابع التالي:

localStorage.removeItem('username');

لحذف كافة البيانات المحفوظة ضمن local storage نستخدم التابع التالي:

localStorage.clear();

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

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

//عند حفظ القيم يجب تحويلها إلى سلسلة نصية
localStorage.setItem('testObject', JSON.stringify(testObject));

var retrievedObject = localStorage.getItem('testObject'); //سيتم استعادة القيم على شكل نص

//بعدها يمكننا تحويل القيمة التي استعدناها إلى غرض
JSON.parse(retrievedObject)

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