تُعدّ العدادات مكونات أساسية في العديد من تطبيقات الويب، حيث تُستخدم لأغراض متنوعة مثل تتبُّع عدد زيارات الصفحات، وعرض مؤشرات التقدم، أو إدارة تفاعلات المستخدم. توفر جافا سكريبت عدة طرق لتنفيذ العدادات، ولكل منها نقاط قوتها ونقاط ضعفها. تستعرض هذه المقالة طريقتين شائعتين: استخدام المتغيرات، والاستفادة من تخزين الجلسة.
محتويات الجدول
- تنفيذ العدادات باستخدام متغيرات جافا سكريبت
- تنفيذ العدادات باستخدام تخزين جلسة جافا سكريبت
- اختيار النهج المناسب
تنفيذ العدادات باستخدام متغيرات جافا سكريبت
أبسط طريقة لإنشاء عداد في جافا سكريبت تتضمن استخدام متغير. هذا النهج مثالي للعدادات التي تحتاج فقط للعمل داخل علامة تبويب واحدة لجلسة المتصفح. تُفقد قيمة العداد بمجرد إغلاق علامة التبويب.
فيما يلي مثال لعداد أساسي يزداد بمقدار واحد مع كل نقرة زر:
<!DOCTYPE html>
<html>
<head>
<title>عداد باستخدام المتغيرات</title>
</head>
<body>
<p>العداد: <span id="counter">0</span></p>
<button id="incrementButton">زيادة</button>
<script>
let counter = 0;
const counterDisplay = document.getElementById('counter');
const incrementButton = document.getElementById('incrementButton');
incrementButton.addEventListener('click', () => {
counter++;
counterDisplay.textContent = counter;
});
</script>
</body>
</html>
المزايا:
- البساطة: سهل التنفيذ والفهم.
- الأداء: سريع وخفيف الوزن.
العيوب:
- عدم الثبات: تُفقد قيمة العداد عند تحديث الصفحة أو إغلاق علامة التبويب.
- النطاق المحدود: العداد قابل للوصول فقط داخل علامة تبويب المتصفح الحالية.
تنفيذ العدادات باستخدام تخزين جلسة جافا سكريبت
بالنسبة للعدادات التي تتطلب الثبات عبر تحديثات الصفحة أو حتى صفحات مختلفة ضمن نفس الجلسة، فإن تخزين الجلسة هو الخيار الأنسب. يحتفظ تخزين الجلسة بقيمة العداد حتى يتم إغلاق علامة تبويب أو نافذة المتصفح.
فيما يلي كيفية تنفيذ عداد باستخدام تخزين الجلسة:
<!DOCTYPE html>
<html>
<head>
<title>عداد باستخدام تخزين الجلسة</title>
</head>
<body>
<p>العداد: <span id="counter">0</span></p>
<button id="incrementButton">زيادة</button>
<script>
let counter = parseInt(sessionStorage.getItem('counter')) || 0;
const counterDisplay = document.getElementById('counter');
const incrementButton = document.getElementById('incrementButton');
incrementButton.addEventListener('click', () => {
counter++;
sessionStorage.setItem('counter', counter);
counterDisplay.textContent = counter;
});
</script>
</body>
</html>
المزايا:
- الثبات: تستمر قيمة العداد عبر تحديثات الصفحة ضمن نفس الجلسة.
- نطاق الجلسة: العداد قابل للوصول عبر صفحات متعددة ضمن نفس الجلسة.
العيوب:
- النطاق المحدود: العداد قابل للوصول فقط داخل نفس علامة التبويب أو النافذة. يؤدي إغلاق علامة التبويب أو النافذة إلى مسح تخزين الجلسة.
- تعقيد متزايد قليلاً: يتطلب استخدام واجهة برمجة التطبيقات
sessionStorage.
اختيار النهج المناسب
يعتمد النهج الأمثل على احتياجات تطبيقك المحددة. بالنسبة للعدادات البسيطة قصيرة الأجل، فإن المتغيرات كافية. أما بالنسبة للعدادات التي تتطلب الثبات عبر تحديثات الصفحة ضمن جلسة، فإن تخزين الجلسة يكون أفضل. وبالنسبة للعدادات التي تحتاج إلى الثبات عبر الجلسات أو الأجهزة المتعددة، فكر في استخدام التخزين المحلي أو حل على جانب الخادم.