حفظ البيانات باستخدام localStorage - JavaScript من الصفر إلى الاحتراف

في المشروع السابق، عند تحديث الصفحة تختفي المهام. السبب: البيانات موجودة في الذاكرة فقط. الحل: استخدام localStorage لحفظ البيانات داخل المتصفح.

ما هو localStorage؟

localStorage هو مساحة تخزين داخل المتصفح:

يحفظ البيانات حتى بعد إغلاق المتصفح
لا يحتاج سيرفر
يخزن نصوص فقط (Strings)

سنحوّل البيانات إلى نص باستخدام JSON.

أساسيات localStorage


// حفظ قيمة
localStorage.setItem("name", "Ahmed");

// قراءة قيمة
let value = localStorage.getItem("name");

// حذف مفتاح
localStorage.removeItem("name");

// مسح كل التخزين
localStorage.clear();

لكن هذه القيم نصية فقط… ماذا عن المصفوفات والكائنات؟

تحويل البيانات باستخدام JSON


let tasks = [
  { text: "مهمة 1", done: false },
  { text: "مهمة 2", done: true }
];

// تحويل إلى نص
let json = JSON.stringify(tasks);

// إرجاعها إلى كائن
let data = JSON.parse(json);

سنستخدم stringify للحفظ وparse للقراءة.

ربط localStorage بمشروع To-Do List

سنضيف دالتين:

saveTasks — لحفظ المهام
loadTasks — لتحميل المهام

دوال الحفظ والتحميل


function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function loadTasks() {
  const saved = localStorage.getItem("tasks");
  if (saved) {
    tasks = JSON.parse(saved);
  }
}

لاحظ أننا استخدمنا نفس المفتاح "tasks".

تعديل render لحفظ البيانات تلقائيًا


function render() {
  taskList.innerHTML = "";

  totalCount.textContent = tasks.length;
  doneCount.textContent  = tasks.filter(t => t.done).length;

  tasks.forEach(function (task, index) {
    // (نفس كود إنشاء العناصر)
  });

  // احفظ بعد كل تحديث
  saveTasks();
}

الآن أي تغيير يتم حفظه تلقائيًا.

تحميل البيانات عند فتح الصفحة


document.addEventListener("DOMContentLoaded", function () {
  loadTasks();
  render();
});

النتيجة: المهام تبقى محفوظة حتى بعد تحديث الصفحة 🔥

أخطاء شائعة مع localStorage

نسيان JSON.stringify قبل الحفظ
نسيان JSON.parse عند القراءة
استخدام مفاتيح مختلفة لنفس البيانات
عدم التحقق من وجود بيانات محفوظة

تطويرات مقترحة

إضافة تاريخ إنشاء لكل مهمة
زر لمسح كل المهام
فلترة المهام (الكل / المنتهي / غير المنتهي)
تخزين الإعدادات (الوضع الليلي مثلًا)

ماذا بعد هذا الدرس؟

الدرس القادم: التعامل مع الوقت والتواريخ ⏱️

سنتعلم Date و setTimeout و setInterval بأمثلة عملية.