إدارة البيانات المؤقتة في المتصفح: localStorage مع صلاحية محددة

مقدمة افتتاحية: هل سبق لك أن أردت تخزين بيانات في متصفح المستخدم، ولكن مع ميزة انتهاء الصلاحية التلقائية تمامًا مثل ملفات تعريف الارتباط (Cookies)؟ localStorage أداة قوية لتخزين البيانات بشكل دائم، لكنها تفتقر إلى هذه الميزة الأساسية. في هذا الدرس النظري، سنستكشف كيف يمكننا تجاوز هذا القيد وابتكار نظام تخزين ذكي يجمع بين قوة localStorage ومرونة تحديد فترة صلاحية للبيانات.

عند تطوير تطبيقات الويب، غالبًا ما نحتاج إلى تخزين بعض البيانات على جهاز المستخدم لتحسين التجربة أو الاحتفاظ بحالة معينة. هنا يأتي دور localStorage، وهي واجهة برمجة تطبيقات (API) بسيطة تتيح لنا تخزين أزواج المفتاح-القيمة (key-value pairs) في المتصفح بشكل دائم، أي أن البيانات لا تُحذف حتى بعد إغلاق المتصفح.

التحدي: عدم وجود صلاحية تلقائية

المشكلة الرئيسية مع localStorage هي أن البيانات المخزنة لا تحتوي على آلية انتهاء صلاحية مدمجة. بمجرد حفظ البيانات، تبقى هناك إلى الأبد ما لم يتم حذفها يدويًا بواسطة المستخدم أو بواسطة كود برمجي. في كثير من السيناريوهات، نحتاج إلى بيانات مؤقتة تنتهي صلاحيتها بعد فترة معينة (مثل رموز التوكن، أو بيانات الجلسة، أو الكاش المؤقت).

الحل: إضافة طبقة الصلاحية يدويًا

للتغلب على هذا التحدي، يمكننا بناء وظائف خاصة بنا تضيف معلومات الصلاحية إلى البيانات المخزنة. الفكرة بسيطة: بدلاً من تخزين القيمة مباشرة، سنقوم بتخزين كائن (Object) يحتوي على القيمة الفعلية ووقت انتهاء الصلاحية.

1. دالة الحفظ مع تحديد الصلاحية (setWithExpiry)

هذه الدالة تستقبل ثلاثة وسائط: key (المفتاح)، value (القيمة المراد تخزينها)، و ttl (Time To Live - مدة الصلاحية بالمللي ثانية). إليك كيفية عملها:

function setWithExpiry(key, value, ttl) {
  const now = new Date(); // الحصول على الوقت الحالي
  const item = {
    value: value,
    expiry: now.getTime() + ttl, // حساب وقت الانتهاء: الوقت الحالي + مدة الصلاحية
  };
  localStorage.setItem(key, JSON.stringify(item)); // تخزين الكائن بعد تحويله إلى نص JSON
}

• نستخدم new Date() للحصول على الكائن الزمني الحالي.
• now.getTime() يعيد عدد المللي ثواني منذ "عصر يونكس" (Unix Epoch)، وهو مقياس عالمي للوقت.
• نقوم بإنشاء كائن item يحتوي على القيمة الأصلية (value) ووقت انتهاء الصلاحية (expiry) الذي نحسبه بإضافة ttl إلى الوقت الحالي.
• أخيرًا، نستخدم JSON.stringify(item) لتحويل الكائن إلى سلسلة نصية (لأن localStorage لا يمكنه تخزين الكائنات مباشرة) ثم نحفظها باستخدام localStorage.setItem.

2. دالة الاسترجاع والتحقق من الصلاحية (getWithExpiry)

هذه الدالة تستقبل المفتاح (key) وتسترجع البيانات، مع التحقق مما إذا كانت صالحة أم لا:

function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null; // إذا لم يجد بيانات لهذا المفتاح
  
  const item = JSON.parse(itemStr); // تحويل النص JSON إلى كائن جافاسكريبت
  const now = new Date();
  
  // التحقق: هل انتهت الصلاحية؟
  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key); // حذف البيانات لأنها منتهية الصلاحية
    return null; // إرجاع null للإشارة إلى أن البيانات غير صالحة
  }
  return item.value; // إرجاع القيمة الأصلية إذا كانت صالحة
}

• نبدأ بمحاولة استرجاع البيانات باستخدام localStorage.getItem(key).
• إذا لم يتم العثور على بيانات (itemStr فارغ)، نعيد null.
• نقطة مهمة: نستخدم JSON.parse(itemStr) لإعادة تحويل السلسلة النصية المخزنة إلى كائن JavaScript الأصلي الذي يحتوي على value و expiry.
• نحصل على الوقت الحالي مرة أخرى (now.getTime()).
• نقارن الوقت الحالي بوقت انتهاء الصلاحية المخزن (item.expiry).
• إذا كان الوقت الحالي أكبر من وقت الانتهاء، فهذا يعني أن البيانات منتهية الصلاحية. في هذه الحالة، نقوم بحذفها من localStorage باستخدام localStorage.removeItem(key) ونعيد null.
• إذا كانت البيانات لا تزال صالحة، نعيد item.value، وهي القيمة الأصلية التي قمنا بتخزينها.

الخلاصة

بواسطة هاتين الدالتين البسيطتين، تمكنا من إضافة ميزة انتهاء الصلاحية إلى localStorage، مما يمنحنا مرونة أكبر في إدارة البيانات على جانب العميل. هذا النهج مفيد جدًا لتخزين الكاش، أو بيانات الجلسة، أو أي معلومات مؤقتة أخرى تحتاج إلى إزالتها تلقائيًا بعد فترة محددة. في الدرس العملي القادم، سنقوم بتطبيق هذه الوظائف ونرى كيف تعمل في الممارسة.

---

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