الدرس التاسع والعشرون: التخزين المحلي (Local Storage) في JavaScript

 تسمح لك Local Storage بحفظ البيانات في متصفح المستخدم، حتى بعد إغلاق الصفحة أو إعادة تشغيل المتصفح. وهذا مفيد جدًا لتخزين الإعدادات أو تفضيلات المستخدم أو أي بيانات مؤقتة.

---

1. ما هو Local Storage؟

Local Storage** هو جزء من Web Storage API يسمح بتخزين بيانات نصية (strings) في متصفح المستخدم.

---

2. طرق الاستخدام الأساسية:

الأمر	الوصف
localStorage.setItem(key, value)	حفظ قيمة تحت مفتاح معين
localStorage.getItem(key)	استرجاع قيمة محفوظة
localStorage.removeItem(key)	حذف قيمة معينة
localStorage.clear()	حذف جميع القيم المخزنة

---

3. مثال عملي:

<input type="text" id="nameInput" placeholder="اكتب اسمك" />
<button onclick="saveName()">حفظ</button>
<p id="output"></p>

<script>
  // تحميل الاسم إذا كان محفوظًا
  let savedName = localStorage.getItem("userName");
  if (savedName) {
    document.getElementById("output").textContent = "مرحباً، " + savedName;
  }

  function saveName() {
    let name = document.getElementById("nameInput").value;
    localStorage.setItem("userName", name);
    document.getElementById("output").textContent = "تم الحفظ! مرحباً، " + name;
  }
</script>

---

4. ملاحظات مهمة:

• البيانات تُخزن كـ نصوص فقط (strings).
• يمكن استخدام JSON.stringify و JSON.parse لتخزين واسترجاع الكائنات والمصفوفات.

مثال على تخزين مصفوفة:

let tasks = ["قراءة", "رياضة", "تعلم"];
localStorage.setItem("todo", JSON.stringify(tasks));

let getTasks = JSON.parse(localStorage.getItem("todo"));
console.log(getTasks[1]); // "رياضة"

---

✅ ملخص الدرس:

• localStorage يحفظ البيانات في متصفح المستخدم بشكل دائم.
• يُستخدم لتخزين نصوص أو كائنات (بعد تحويلها إلى JSON).
• يمكن الوصول إلى البيانات المحفوظة في أي وقت طالما لم تُحذف.