LocalStorage هي طريقة لتخزين البيانات في المتصفح بحيث تبقى محفوظة حتى بعد إغلاق الصفحة أو إعادة تشغيل الجهاز.
1. ما هو LocalStorage؟
- LocalStorage يخزن البيانات على شكل أزواج (مفتاح - قيمة).
- جميع البيانات تُخزن كنصوص (strings).
- لا تُحذف تلقائيًا (مثل الـ sessionStorage).
2. إضافة بيانات إلى LocalStorage
localStorage.setItem("username", "نور");
"username": المفتاح"نور": القيمة
3. قراءة البيانات من LocalStorage
let name = localStorage.getItem("username");
console.log(name); // نور
4. حذف عنصر واحد من التخزين
localStorage.removeItem("username");
5. حذف جميع البيانات
localStorage.clear();
6. تخزين كائن (Object)
بما أن LocalStorage يقبل strings فقط، نحتاج إلى تحويل الكائن باستخدام JSON.stringify:
let user = {
name: "نور",
age: 25
};
localStorage.setItem("user", JSON.stringify(user));
ثم نستعيده هكذا:
let data = localStorage.getItem("user");
let userObj = JSON.parse(data);
console.log(userObj.name); // نور
✅ ملخص الدرس:
| العملية | الكود |
|---|---|
| إضافة عنصر | localStorage.setItem("key", "value") |
| قراءة عنصر | localStorage.getItem("key") |
| حذف عنصر | localStorage.removeItem("key") |
| حذف الكل | localStorage.clear() |
| تخزين كائن | استخدم JSON.stringify و JSON.parse |
