مقدمة
في الدرس السابق تعرفنا على Forms، وكيف يمكن قراءة بيانات المستخدم والتحقق منها قبل معالجتها.
لكن ماذا لو أردنا حفظ بعض البيانات داخل المتصفح حتى تبقى موجودة عندما يغلق المستخدم الصفحة؟
هنا يأتي دور Local Storage.
---
ما هو Local Storage؟
localStorage هو جزء من Web Storage API يسمح لصفحة الويب بتخزين بيانات بسيطة داخل متصفح المستخدم.
تبقى البيانات محفوظة حتى بعد إغلاق الصفحة أو المتصفح، إلى أن يتم حذفها أو إزالتها بواسطة التطبيق أو المستخدم.
---
لماذا نستخدم Local Storage؟
يمكن استخدامه لحفظ بيانات بسيطة مثل:
إعدادات المستخدم
تفضيلات الموقع
بعض الخيارات
حالة واجهة معينة
بيانات صغيرة يحتاج إليها التطبيق لاحقًا
---
تخزين البيانات
يوفر localStorage طريقة تسمح بإضافة قيمة باستخدام مفتاح معين.
الفكرة الأساسية هي:
Key → Value
أي أن كل قيمة يتم تخزينها تحت اسم أو مفتاح يمكن استخدامه للوصول إليها لاحقًا.
---
قراءة البيانات
بعد تخزين البيانات يمكن استرجاعها باستخدام المفتاح الذي تم تخزينها تحته.
إذا لم توجد قيمة بهذا المفتاح، فلن يحصل البرنامج على البيانات المطلوبة.
---
حذف البيانات
يمكن حذف قيمة معينة من التخزين المحلي، كما يمكن حذف جميع البيانات التي تخص الموقع باستخدام الأدوات المناسبة.
وهذا مفيد عندما يريد المستخدم إعادة ضبط إعداداته أو عندما يحتاج التطبيق إلى تنظيف البيانات.
---
Local Storage يخزن النصوص
من النقاط المهمة أن localStorage يتعامل مع القيم على أنها نصوص (Strings).
إذا أردنا تخزين بيانات أكثر تعقيدًا مثل كائن JavaScript أو مصفوفة، يمكن استخدام:
JSON.stringify()
وعند استرجاع البيانات يمكن استخدام:
JSON.parse()
وهكذا يمكن الجمع بين JSON وLocal Storage لتخزين بيانات منظمة.
---
Local Storage وSession Storage
يوجد أيضًا Session Storage.
الفرق الأساسي هو أن بيانات localStorage تستمر عادةً حتى يتم حذفها، بينما بيانات sessionStorage مرتبطة بجلسة التصفح وتُزال عند انتهاء الجلسة وفق سلوك المتصفح.
---
هل Local Storage مناسب لكل البيانات؟
لا.
localStorage مناسب للبيانات البسيطة وغير الحساسة.
ولا ينبغي استخدامه لتخزين معلومات حساسة مثل كلمات المرور أو البيانات السرية، لأن البيانات المخزنة فيه يمكن الوصول إليها من JavaScript الموجودة في الصفحة.
---
استخدام Local Storage في المشاريع
يمكن استخدامه في:
حفظ إعدادات التطبيق
حفظ تفضيلات المستخدم
تطبيقات المهام البسيطة
حفظ وضع الواجهة
التطبيقات التي تحتاج إلى تخزين بيانات صغيرة محليًا
---
فوائد Local Storage
من أهم فوائده:
سهل الاستخدام
لا يحتاج إلى خادم لتخزين البيانات
يحتفظ بالبيانات بعد إغلاق الصفحة
مناسب للبيانات الصغيرة
يعمل مباشرة من JavaScript
---
أخطاء شائعة عند المبتدئين
من الأخطاء الشائعة:
تخزين بيانات حساسة فيه
نسيان أن القيم يتم تخزينها كنصوص
محاولة التعامل مع JSON مباشرة دون تحويلها
تخزين كميات كبيرة من البيانات
الاعتقاد أن Local Storage بديل كامل لقواعد البيانات
---
ملخص الدرس
تعرفنا في هذا الدرس على Local Storage، وكيف يمكن استخدامه لحفظ واسترجاع وحذف البيانات البسيطة داخل المتصفح، كما تعرفنا على علاقته بـ JSON والفرق الأساسي بينه وبين Session Storage.
في الدرس الثامن والثلاثون سنتعرف على JavaScript Modules، وسنفهم كيف يمكن تقسيم المشروع إلى ملفات وأجزاء مستقلة وإعادة استخدام الكود بينها.