كل اللي محتاج تعرفه عن localStorage في JavaScript

💡 يعني إيه localStorage؟​

الـ localStorage هو جزء من Web Storage API في JavaScript، وبيُستخدم لتخزين البيانات داخل المتصفح بتاع المستخدم بشكل دائم - يعني البيانات بتفضل موجودة حتى بعد ما تقفل المتصفح، على عكس sessionStorage اللي بيتمسح أول ما التبويب يتقفل.

🔥 مميزات localStorage​

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

---

🧩 إزاي تستخدم localStorage​

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

localStorage.setItem('username', 'Ahmed');

2. جلب بيانات​

let username = localStorage.getItem('username');
console.log(username); // Ahmed

3. حذف قيمة معينة​

localStorage.removeItem('username');

4. حذف كل البيانات​

localStorage.clear();

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

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

---

🧠 تخزين بيانات معقدة (كائنات أو Arrays)​

لأن localStorage بيخزن البيانات كـ Strings فقط، لازم تستخدم [B]JSON.stringify()[/B] و [B]JSON.parse()[/B]:

تخزين كائن:​

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

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

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

---

⚙️ مثال عملي كامل​

// حفظ بيانات المستخدم
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();

---

🚨 نصايح مهمة​

• ❌ ما تخزنش بيانات حساسة زي كلمات المرور.
• 📦 اختبر المساحة قبل تخزين كميات كبيرة.
• 🛡️ استخدم try...catch عشان تتعامل مع أي أخطاء محتملة.

---

✅ استخدامات localStorage​

• حفظ إعدادات المستخدم (زي الثيم واللغة).
• تخزين المفضلات أو البيانات المؤقتة.
• إنشاء كاش محلي لتسريع الموقع.

💬 جرّب تستخدم localStorage في مشروعك وشوف قد إيه هتسهل حياتك كمبرمج! 🚀