الوحدة 10: التخزين المحلي (Local Storage) في JavaScript

إليك كورس كامل عن الوحدة 10: التخزين المحلي (Local Storage) في JavaScript، الذي يشرح كيفية تخزين البيانات على جهاز المستخدم باستخدام Local Storage وكيفية استخدامها في تطبيقات الويب.

الوحدة 10: التخزين المحلي (Local Storage) في JavaScript

الدرس 1: مقدمة في التخزين المحلي

• المفهوم الأساسي: التخزين المحلي (Local Storage) هو ميزة في HTML5 تسمح بتخزين البيانات بشكل محلي في متصفح المستخدم. يتيح هذا التخزين حفظ البيانات بين الجلسات (حتى بعد إغلاق المتصفح) دون الحاجة إلى قاعدة بيانات خارجية.

1. لماذا نحتاج إلى Local Storage؟

• تخزين البيانات المحلية: يمكن تخزين بيانات بسيطة مثل تفضيلات المستخدم أو معلومات الجلسة.
• الاستمرارية: يظل التخزين المحلي متاحًا حتى بعد إغلاق المتصفح أو إعادة تحميل الصفحة.
• سعة التخزين: يمكن لكل مجال (Domain) تخزين بيانات تصل إلى 5 ميغابايت في المتصفح.

الدرس 2: استخدام Local Storage

• المفهوم: يتيح لك localStorage تخزين البيانات بشكل مؤقت في متصفح المستخدم باستخدام أزواج من المفاتيح والقيم.

1. تخزين البيانات باستخدام localStorage.setItem()

• لتخزين البيانات، نستخدم setItem() لتحديد المفتاح والقيمة.
  javascript

  Copy code

  localStorage.setItem("username", "Ahmed");
localStorage.setItem("age", "25");


2. استرجاع البيانات باستخدام localStorage.getItem()

• لاسترجاع البيانات المخزنة، نستخدم getItem() مع المفتاح.
  javascript

  Copy code

  let username = localStorage.getItem("username");
console.log(username); // "Ahmed"


3. حذف البيانات باستخدام localStorage.removeItem()

• لحذف قيمة معينة من التخزين المحلي، نستخدم removeItem() مع المفتاح.
  javascript

  Copy code

  localStorage.removeItem("age");


4. مسح كافة البيانات باستخدام localStorage.clear()

• لمسح جميع البيانات المخزنة في localStorage، نستخدم clear().
  javascript

  Copy code

  localStorage.clear(); // يمسح جميع البيانات


الدرس 3: التعامل مع أنواع البيانات في Local Storage

• المفهوم: البيانات المخزنة في localStorage تكون دائمًا من النوع نص (String). لذا، إذا أردنا تخزين كائنات أو مصفوفات، يجب تحويلها إلى نصوص باستخدام JSON.stringify() واسترجاعها باستخدام JSON.parse().

1. تخزين كائن أو مصفوفة

• لتخزين كائن أو مصفوفة، نحتاج أولاً لتحويله إلى نص باستخدام JSON.stringify().
  javascript

  Copy code

  let user = { name: "Ahmed", age: 25 };
localStorage.setItem("user", JSON.stringify(user));


2. استرجاع كائن أو مصفوفة

• عند استرجاع البيانات، نستخدم JSON.parse() لتحويل النص مرة أخرى إلى كائن أو مصفوفة.
  javascript

  Copy code

  let storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // "Ahmed"
console.log(storedUser.age); // 25


الدرس 4: الاستخدامات الشائعة لـ Local Storage

• المفهوم: يمكن استخدام التخزين المحلي لتخزين البيانات المؤقتة التي تحتاج إلى حفظها بين الجلسات.

1. تخزين التفضيلات

• يمكن تخزين تفضيلات المستخدم، مثل اختيار اللغة أو السمة الداكنة (Dark Mode).
  javascript

  Copy code

  let darkMode = true;
localStorage.setItem("darkMode", darkMode);


2. تخزين معلومات الجلسة

• يمكن تخزين معلومات الجلسة للمستخدم، مثل اسم المستخدم بعد تسجيل الدخول.
  javascript

  Copy code

  let username = "Ahmed";
localStorage.setItem("username", username);


3. إدارة سلة التسوق

• يمكن تخزين العناصر في سلة التسوق باستخدام Local Storage.
  javascript

  Copy code

  let cart = ["item1", "item2", "item3"];
localStorage.setItem("cart", JSON.stringify(cart));


الدرس 5: ملاحظات حول استخدام Local Storage

• المحدودية: لا يمكن استخدام Local Storage لتخزين كميات ضخمة من البيانات (عادة 5 ميجابايت لكل مجال).
• الأمان: البيانات المخزنة في Local Storage غير مشفرة، لذا يجب توخي الحذر عند تخزين معلومات حساسة مثل كلمات المرور أو بيانات البطاقة الائتمانية.
• التوافق: معظم المتصفحات الحديثة تدعم Local Storage، ولكن يمكن التحقق من الدعم باستخدام:
  javascript

  Copy code

  if (typeof(Storage) !== "undefined") {
// يمكن استخدام Local Storage
} else {
console.log("Local Storage غير مدعوم في هذا المتصفح");
}


الدرس 6: أحداث Local Storage

• المفهوم: يمكن الاستماع لأحداث التغير في Local Storage باستخدام storage event. يتم تفعيل الحدث عندما يتم تعديل الـ localStorage في نافذة أو تبويب آخر.

1. استخدام الحدث storage

• يتم استدعاء هذا الحدث عندما يتم تعديل البيانات في Local Storage عبر نافذة أو تبويب آخر.
  javascript

  Copy code

  window.addEventListener("storage", function(event) {
console.log("تم تغيير التخزين المحلي!");
console.log("المفتاح الذي تم تعديله: " + event.key);
console.log("القيمة الجديدة: " + event.newValue);
});


الدرس 7: تلخيص الوحدة

• Local Storage يسمح بتخزين البيانات بشكل دائم على جهاز المستخدم، حتى بعد إغلاق المتصفح.
• أساسيات العمل:
  • استخدام setItem() لتخزين البيانات.
  • استخدام getItem() لاسترجاع البيانات.
  • استخدام removeItem() لحذف عنصر محدد و clear() لمسح كافة البيانات.
• أنواع البيانات: البيانات المخزنة تكون دائمًا من النوع نصي، لذا يجب تحويل الكائنات والمصفوفات إلى نصوص باستخدام JSON.stringify() واسترجاعها باستخدام JSON.parse().
• الأمان: لا ينبغي تخزين المعلومات الحساسة في Local Storage.
• التحقق من التوافق: تحقق من دعم Local Storage في المتصفح قبل استخدامه.

المشاريع العملية للوحدة 10:

• مشروع 1: بناء تطبيق لحفظ تفضيلات المستخدم (مثل وضع السمة الداكنة) بين الجلسات باستخدام Local Storage.
• مشروع 2: إنشاء تطبيق سلة تسوق يحفظ العناصر بين الجلسات باستخدام Local Storage.
• مشروع 3: إنشاء صفحة تسجيل دخول بسيطة حيث يتم تخزين اسم المستخدم بعد تسجيل الدخول في Local Storage لاسترجاعه لاحقًا.