يعني إيه LocalStorage ؟

[x32x01]

localStorage هو جزء من Web Storage API في JavaScript.
بيستخدم لتخزين البيانات في المتصفح بتاع المستخدم بشكل دائم (مش زي الـ sessionStorage اللي البيانات فيه بتتمسح بمجرد ما تقفل التبويب).

أهم مميزاته:

• التخزين الدائم: البيانات مش بتتمسح إلا لو أنت بنفسك مسحتها أو المستخدم مسح الكاش بتاع المتصفح.
• مساحة كبيرة نسبيًا: كل دومين عنده مساحة تخزين حوالي 5MB.
• سهولة الاستخدام: تعاملها زي الـ key-value في كائن JavaScript.

إزاي أستخدم LocalStorage؟​

1. إضافة بيانات

localStorage.setItem('key', 'value');
مثال:
localStorage.setItem('username', 'Ahmed');

2. جلب بيانات

let value = localStorage.getItem('key');
مثال:
let username = localStorage.getItem('username'); console.log(username); // Ahmed

3. مسح قيمة معينة

localStorage.removeItem('key');
مثال:
localStorage.removeItem('username');

4. مسح كل البيانات

localStorage.clear();
مثال:
localStorage.clear();

5. التحقق من وجود بيانات

if (localStorage.getItem('key')) { console.log('The key exists!'); }

تخزين بيانات أكتر تعقيدًا:

localStorage بيخزن البيانات كـ Strings، فلو عندك بيانات زي كائنات أو Arrays، هتحتاج تحولهم باستخدام JSON:

تخزين كائن:

let user = { name: 'Ahmed', age: 25 }; localStorage.setItem('user', JSON.stringify(user));

استرجاع كائن:

let user = JSON.parse(localStorage.getItem('user')); console.log(user.name); // Ahmed

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

تعامل مع الأخطاء: استخدم try...catch عشان تحمي الكود بتاعك.

مثال عملي:

// حفظ بيانات المستخدم
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'ar');

// استرجاع البيانات
let theme = localStorage.getItem('theme');
let language = localStorage.getItem('language');
console.log(Theme: ${theme}, Language: ${language});

// تعديل البيانات
localStorage.setItem('theme', 'light');

// مسح البيانات
localStorage.removeItem('language');

// مسح كل حاجة
localStorage.clear();

ختامًا، localStorage أداة قوية وسهلة لاستخدامها في حاجات زي:

تخزين إعدادات المستخدم.
الحاجات المفضلة (favorites).
تخزين بيانات كاش محلية.
جرب تستخدمها في مشروعك وشوف قد إيه هتسهل عليك الدنيا!