تطبيق عملي: بناء نظام تخزين مؤقت ذكي باستخدام JavaScript و localStorage

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.

---

مقدمة افتتاحية: بعد أن استوعبنا الجوانب النظرية لكيفية إضافة ميزة انتهاء الصلاحية إلى localStorage، حان الوقت لنضع أيدينا في الكود! في هذا الدرس العملي المثير، سنقوم بتطبيق الدالتين setWithExpiry و getWithExpiry خطوة بخطوة، ثم نختبرهما لنرى كيف يمكننا إدارة البيانات المؤقتة بذكاء وكفاءة في تطبيقات الويب الخاصة بنا. استعد لتجربة عملية ستغير طريقة تفكيرك في تخزين البيانات في المتصفح!

لماذا نحتاج هذا التطبيق العملي؟

كما ذكرنا سابقًا، localStorage رائع لتخزين البيانات بشكل دائم، لكن افتقاره لميزة انتهاء الصلاحية يحد من استخدامه في سيناريوهات معينة. من خلال بناء نظامنا الخاص لتحديد الصلاحية، يمكننا:

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

الخطوة 1: بناء دالة الحفظ مع الصلاحية (setWithExpiry)

لنبدأ بكتابة دالة setWithExpiry التي ستقوم بتغليف القيمة المراد تخزينها مع وقت انتهاء صلاحيتها. افتح محرر الأكواد الخاص بك أو وحدة تحكم المتصفح (Console) واتبع:

// دالة لحفظ البيانات مع تحديد وقت الانتهاء (بالميلي ثانية)
function setWithExpiry(key, value, ttl) {
  const now = new Date(); // الحصول على الوقت الحالي
  const item = {
    value: value, // القيمة الأصلية المراد تخزينها
    expiry: now.getTime() + ttl, // حساب وقت الانتهاء بإضافة مدة الصلاحية للوقت الحالي
  };
  localStorage.setItem(key, JSON.stringify(item)); // تخزين الكائن كـ JSON في localStorage
  console.log(`تم حفظ المفتاح "${key}" بنجاح مع صلاحية لـ ${ttl / 1000} ثوانٍ.`);
}

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

الخطوة 2: بناء دالة الاسترجاع مع التحقق من الصلاحية (getWithExpiry)

الآن، لنقم ببناء دالة getWithExpiry التي ستكون مسؤولة عن استرجاع البيانات والتحقق من أنها لا تزال صالحة. انتبه جيدًا هنا للتعديل الهام: سنستخدم JSON.parse() بدلاً من JSON.stringify() لاستعادة الكائن من النص المخزن.

// دالة لاسترجاع البيانات والتحقق من صلاحيتها
function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) {
    console.log(`المفتاح "${key}" غير موجود في localStorage.`);
    return null; // لا يوجد بيانات لهذا المفتاح
  }

  const item = JSON.parse(itemStr); // **تصحيح هام:** تحويل النص JSON إلى كائن جافاسكريبت
  const now = new Date();

  // التحقق: هل انتهت الصلاحية؟
  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key); // حذف البيانات لأنها منتهية الصلاحية
    console.log(`المفتاح "${key}" منتهي الصلاحية وتم حذفه.`);
    return null; // إرجاع null للإشارة إلى أن البيانات غير صالحة
  }
  console.log(`المفتاح "${key}" لا يزال صالحًا.`);
  return item.value; // إرجاع القيمة الأصلية إذا كانت صالحة
}

شرح سريع: تسترجع هذه الدالة البيانات، تحولها من JSON إلى كائن، ثم تقارن وقت انتهاء الصلاحية المخزن بالوقت الحالي. إذا كانت منتهية، تحذفها وتعيد null؛ وإلا، تعيد القيمة الأصلية.

الخطوة 3: تجربة الدوال في العمل

الآن بعد أن أصبح لدينا الدالتان، دعنا نرى كيف تعملان معًا. سنقوم بحفظ اسم مستخدم لمدة 5 ثوانٍ فقط:

// تجربة: حفظ اسم المستخدم لمدة 5 ثوانٍ فقط (5000 ميلي ثانية)
console.log("--- بدء التجربة ---");
setWithExpiry("username", "Ali_Dev", 5000); // حفظ "Ali_Dev" لمدة 5 ثوانٍ
console.log("تم حفظ اسم المستخدم 'Ali_Dev' لمدة 5 ثوانٍ.");

// جرب استرجاع البيانات فورًا
let user = getWithExpiry("username");
console.log("القيمة المسترجعة فورًا:", user); // يجب أن تكون "Ali_Dev"

// انتظر 6 ثوانٍ ثم حاول الاسترجاع مرة أخرى
setTimeout(() => {
  console.log("\n--- بعد مرور 6 ثوانٍ ---");
  user = getWithExpiry("username");
  console.log("القيمة المسترجعة بعد 6 ثوانٍ:", user); // يجب أن تكون null
  if (user === null) {
    console.log("تم حذف البيانات بنجاح لأن صلاحيتها انتهت!");
  }
  console.log("--- نهاية التجربة ---");
}, 6000);

كيفية التجربة:

1. افتح متصفح الويب الخاص بك (مثل Chrome أو Firefox).
2. افتح "أدوات المطور" (Developer Tools) بالضغط على F12 أو بالنقر بزر الماوس الأيمن واختيار "Inspect" أو "فحص".
3. انتقل إلى علامة التبويب "Console" (وحدة التحكم).
4. انسخ والصق الكود الكامل للدالتين setWithExpiry و getWithExpiry، ثم الصق كود التجربة.
5. اضغط Enter وشاهد المخرجات في وحدة التحكم. ستلاحظ أن القيمة تظهر في البداية، ثم تختفي وتصبح null بعد مرور 6 ثوانٍ.
6. يمكنك أيضًا التحقق من localStorage في علامة التبويب "Application" (أو "Storage") -> "Local Storage" لترى كيف يظهر الكائن المحفوظ ثم يختفي.

الخلاصة:

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