التعامل مع البيانات المخزنة (LocalStorage & SessionStorage)

الدرس الثامن عشر: التعامل مع البيانات المخزنة (LocalStorage & SessionStorage)

مقدمة

في عالم تطوير الويب، يعد تخزين البيانات في المتصفح من العوامل المهمة التي تسهم في تحسين تجربة المستخدم. من بين الأدوات المتاحة لذلك، تأتي تقنيات LocalStorage و SessionStorage التي تساعد في حفظ البيانات على جهاز المستخدم حتى بعد إغلاق المتصفح أو عند التصفح عبر عدة صفحات في الموقع.

في هذا المقال، سنتعرف على ماهية LocalStorage و SessionStorage، وكيفية تخزين واسترجاع البيانات باستخدامهما، بالإضافة إلى كيفية استخدامهما في حفظ الجلسات.

ما هو LocalStorage و SessionStorage؟

LocalStorage و SessionStorage هما نوعان من آليات التخزين التي يوفرها HTML5 عبر واجهة برمجة التطبيقات (API) الخاصة بـ Web Storage. كل من هذه الأدوات يتيح تخزين البيانات في المتصفح، لكنهما يختلفان في كيفية تعاملهم مع البيانات.

1. LocalStorage:

• LocalStorage هو نوع من التخزين الذي يحتفظ بالبيانات لفترة غير محدودة (حتى إغلاق المتصفح أو مسح البيانات يدوياً من قبل المستخدم).
• البيانات المخزنة باستخدام LocalStorage تبقى محفوظة عبر الجلسات المتعددة، أي حتى عند إغلاق المتصفح وإعادة فتحه، تبقى البيانات موجودة.
• سعة التخزين في LocalStorage تكون عادة أكبر من SessionStorage، ويمكن أن تصل إلى حوالي 5 ميغابايت.

2. SessionStorage:

• SessionStorage هو تخزين يتم تدميره فور إغلاق الجلسة الحالية (أي إغلاق المتصفح أو تبويب المتصفح).
• البيانات المخزنة باستخدام SessionStorage تكون محدودة بنطاق التبويب (Tab) الحالي، مما يعني أنه لا يمكن الوصول إليها من تبويبات أو نوافذ متصفح أخرى.
• سعة التخزين في SessionStorage مشابهة لـ LocalStorage ولكنها تكون مخصصة للجلسة الحالية فقط.

كيفية تخزين واسترجاع البيانات باستخدام LocalStorage و SessionStorage

تسمح واجهة Web Storage API بالوصول إلى LocalStorage و SessionStorage من خلال كود JavaScript. يمكن تخزين واسترجاع البيانات باستخدام دوال بسيطة.

1. تخزين البيانات:

يمكن تخزين البيانات في LocalStorage أو SessionStorage باستخدام الدالة setItem()، حيث تأخذ هذه الدالة مفتاحاً وقيمةً لتخزينها.

// تخزين البيانات في LocalStorage
localStorage.setItem("username", "JohnDoe");

// تخزين البيانات في SessionStorage
sessionStorage.setItem("sessionID", "123456");

2. استرجاع البيانات:

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

// استرجاع البيانات من LocalStorage
let username = localStorage.getItem("username");
console.log(username); // ستظهر "JohnDoe"

// استرجاع البيانات من SessionStorage
let sessionID = sessionStorage.getItem("sessionID");
console.log(sessionID); // ستظهر "123456"

3. حذف البيانات:

يمكن حذف البيانات باستخدام الدالة removeItem()، والتي تأخذ المفتاح الذي تريد حذف البيانات المرتبطة به.

// حذف البيانات من LocalStorage
localStorage.removeItem("username");

// حذف البيانات من SessionStorage
sessionStorage.removeItem("sessionID");

4. حذف جميع البيانات:

إذا أردت مسح جميع البيانات المخزنة في LocalStorage أو SessionStorage، يمكنك استخدام الدالة clear().

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

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

استخدام التخزين المحلي لحفظ الجلسات

يمكن استخدام LocalStorage و SessionStorage لحفظ بيانات الجلسات المختلفة وتحسين تجربة المستخدم. على سبيل المثال:

1. حفظ حالة تسجيل الدخول: يمكن تخزين بيانات مثل معرف المستخدم أو حالته (تسجيل الدخول أو لا) في LocalStorage بحيث تظل محفوظة حتى عند إغلاق المتصفح. في المرة القادمة التي يزور فيها المستخدم الموقع، يمكن استرجاع هذه البيانات لتسجيل الدخول تلقائياً.

// حفظ حالة تسجيل الدخول
localStorage.setItem("isLoggedIn", "true");

// استرجاع حالة تسجيل الدخول
if (localStorage.getItem("isLoggedIn") === "true") {
  console.log("User is logged in");
}

2. حفظ البيانات عبر الجلسات: إذا كانت لديك حاجة لحفظ البيانات فقط ضمن الجلسة الحالية (مثل بيانات السلة في متجر إلكتروني أو معلومات مؤقتة في نموذج)، فيمكنك استخدام SessionStorage. ستظل هذه البيانات متاحة طالما تبقى المستخدم في نفس التبويب.

// حفظ بيانات السلة في SessionStorage
sessionStorage.setItem("cart", JSON.stringify([{"item": "T-shirt", "price": 20}]));

// استرجاع بيانات السلة
let cart = JSON.parse(sessionStorage.getItem("cart"));
console.log(cart);

الخلاصة

كل من LocalStorage و SessionStorage يمثلان أدوات قوية في تطوير الويب لحفظ البيانات في المتصفح. الاختلاف الرئيسي بينهما هو أن LocalStorage يحتفظ بالبيانات حتى بعد إغلاق المتصفح، بينما يتم تدمير البيانات في SessionStorage بمجرد إغلاق الجلسة.

تستطيع استخدام LocalStorage لتخزين البيانات طويلة الأمد مثل حالة تسجيل الدخول أو تفضيلات المستخدم، بينما يكون SessionStorage مفيداً لتخزين بيانات الجلسة المؤقتة.

تتيح هذه الأدوات للمطورين توفير تجربة مستخدم أكثر سلاسة عبر التخزين المحلي للبيانات، مما يقلل من الحاجة إلى التفاعل المستمر مع الخوادم ويحسن من سرعة استجابة التطبيق.