فهم التبديل بين الأوضاع (النهاري/الليلي) باستخدام JavaScript و LocalStorage

فهم التبديل بين الأوضاع (النهاري/الليلي) باستخدام JavaScript و LocalStorage

أصبح التبديل بين الوضع النهاري والوضع الليلي ميزة أساسية في العديد من مواقع الويب وتطبيقات الهاتف المحمول، مما يوفر راحة بصرية للمستخدمين ويحسن إمكانية الوصول. في هذا الدرس، سنتعمق في المبادئ الأساسية وراء تنفيذ هذه الميزة باستخدام JavaScript وواجهة برمجة تطبيقات تخزين المتصفح (LocalStorage).

1. التفاعل مع DOM: التحكم في عناصر HTML

الأساس لأي تغيير بصري في صفحة الويب هو التلاعب بنموذج كائن المستند (DOM). يسمح لنا JavaScript بالوصول إلى عناصر HTML وتعديلها.

  • document.body: يمثل هذا خاصية <body> في صفحة HTML. من خلال الوصول إليه، يمكننا تطبيق تغييرات على الجسم بأكمله، مما يؤثر على مظهر الصفحة بالكامل.
  • classList: هي خاصية خاصة بعناصر DOM تتيح لنا إدارة فئات CSS الخاصة بالعنصر بسهولة.
    • classList.toggle('class-name'): هذه الدالة هي جوهر التبديل. إذا كان العنصر يحتوي بالفعل على الفئة 'class-name'، فستقوم بإزالتها. وإذا لم يكن يحتوي عليها، فستقوم بإضافتها. هذا مثالي لإنشاء مفتاح تشغيل/إيقاف.
    • classList.contains('class-name'): تتحقق هذه الدالة مما إذا كان العنصر يحتوي على الفئة 'class-name' وتُرجع true أو false. نستخدمها لتحديد الوضع الحالي بعد التبديل.

في الكود الذي لدينا، body.classList.toggle('dark-mode') هو المسؤول عن إضافة أو إزالة الفئة 'dark-mode' من عنصر <body>، مما يؤدي إلى تغيير الأنماط المطبقة على الصفحة.

2. تخزين التفضيلات: LocalStorage

نريد أن يتذكر موقع الويب الخاص بنا تفضيل المستخدم للوضع (النهاري أو الليلي) حتى بعد إغلاق المتصفح أو تحديث الصفحة. هنا يأتي دور LocalStorage.

  • ما هو LocalStorage؟ هو جزء من Web Storage API الذي يسمح لتطبيقات الويب بتخزين البيانات بشكل دائم داخل متصفح المستخدم (على عكس ملفات تعريف الارتباط، يمكنه تخزين كميات أكبر من البيانات ولا يتم إرساله مع كل طلب HTTP).
  • localStorage.setItem(key, value): تُستخدم هذه الدالة لتخزين زوج من المفتاح والقيمة. في مثالنا، نستخدم 'theme' كمفتاح والقيمة 'dark' أو 'light'.
  • localStorage.getItem(key): تُستخدم هذه الدالة لاسترداد القيمة المرتبطة بمفتاح معين. إذا لم يكن المفتاح موجودًا، فإنها تُرجع null.

يضمن استخدام localStorage أنه عندما يعود المستخدم إلى موقعنا، سيتم تحميل الصفحة بالوضع الذي اختاره آخر مرة، مما يوفر تجربة مستخدم سلسة.

3. ربط كل شيء معًا: الدالة الشرطية (if/else) وتسجيل الدخول إلى وحدة التحكم

تجمع الدالة toggleDarkMode() بين هذه المفاهيم:

function toggleDarkMode() {
  const body = document.body; // الوصول إلى عنصر body
  body.classList.toggle('dark-mode'); // تبديل فئة 'dark-mode'

  // التحقق من الفئة بعد التبديل لحفظ التفضيل الصحيح
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark'); // حفظ 'dark'
    console.log('تم تفعيل الوضع الليلي 🌙');
  } else {
    localStorage.setItem('theme', 'light'); // حفظ 'light'
    console.log('تم تفعيل الوضع النهاري ☀️');
  }
}
  • يتم استخدام عبارة if/else للتحقق من الحالة الحالية لعنصر <body> بعد تطبيق toggle(). بناءً على ما إذا كانت الفئة 'dark-mode' موجودة أم لا، يتم حفظ القيمة المناسبة ('dark' أو 'light') في localStorage.
  • تُستخدم console.log() لتوفير ملاحظات للمطور في وحدة تحكم المتصفح، وهي مفيدة جدًا لأغراض التصحيح.

الخلاصة

من خلال الجمع بين التلاعب بالـ DOM وواجهة برمجة تطبيقات LocalStorage، يمكننا إنشاء ميزات تفاعلية ومستمرة مثل تبديل الوضع الليلي. هذا الفهم هو حجر الزاوية في بناء تجارب ويب ديناميكية وموجهة للمستخدم.


🔗 الخطوة التالية: انتقل إلى التطبيق العملي وجرب الكود بنفسك من هنا.