الحفاظ على البيانات في صفحات الويب

يؤدي تمرير البيانات بين صفحات HTML باستخدام معلمات الاستعلام إلى إثارة مشكلة رؤية البيانات في عنوان URL. لحسن الحظ، هناك آليات بديلة في JavaScript وjQuery لنقل البيانات عبر الصفحات.

الاستفادة من كائنات تخزين HTML5

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

تخزين الجلسة

لتخزين البيانات المؤقتة داخل جلسة متصفح واحدة، تخزين الجلسة مثالي. تظل البيانات المخزنة في sessionStorage قابلة للوصول حتى انتهاء الجلسة (على سبيل المثال، عند إغلاق علامة تبويب المتصفح).

sessionStorage.setItem('label', 'value');
sessionStorage.getItem('label');

التخزين المحلي

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

localStorage.setItem('label', 'value');
localStorage.getItem('label');

فوائد كائنات تخزين HTML5

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