JavaScript - Web Storage API

JavaScript Web Storage API – تخزين البيانات في المتصفح

🔸 Web Storage API تسمح لك بتخزين البيانات داخل متصفح المستخدم باستخدام طريقتين:

• localStorage – البيانات تُخزن بشكل دائم حتى يتم حذفها يدويًا.
• sessionStorage – البيانات تُخزن فقط طوال مدة الجلسة (حتى يتم إغلاق التبويب).

---

🔹 حفظ واسترجاع البيانات باستخدام localStorage

// حفظ
localStorage.setItem("username", "Mahmoud");

// استرجاع
let user = localStorage.getItem("username");
console.log(user); // Mahmoud

// حذف عنصر
localStorage.removeItem("username");

// حذف كل شيء
localStorage.clear();

---

🔹 sessionStorage يعمل بنفس الطريقة

sessionStorage.setItem("color", "blue");
console.log(sessionStorage.getItem("color")); // blue

📌 يتم حذف بيانات sessionStorage تلقائيًا عند إغلاق المتصفح أو التبويب.

---

🔹 تخزين الكائنات باستخدام JSON

const user = { name: "Ahmed", age: 30 };

// تخزين
localStorage.setItem("user", JSON.stringify(user));

// استرجاع
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // Ahmed

---

📌 مميزات Web Storage

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

---

⚠️ ملاحظات مهمة

• لا تستخدمه لتخزين بيانات حساسة — فهي مرئية لأي شخص يفتح أدوات المطور.
• الحد الأقصى للحجم عادة يكون 5 إلى 10 ميجابايت.