توفر جافا سكريبت عدة اساليب للتعامل مع البيانات لكن نحن هنا للحديث عن ثلاثة خيارات لتخزين البيانات في المتصفح وهي : ملفات تعريف الارتباط (cookies)، والتخزين المحلي (local storage)، وتخزين الجلسة (session storage). على الرغم من أنها تستخدم لأغراضًا متشابهة في حفظ البيانات للوصول إليها لاحقاً ، إلا أن هناك اختلافات هامة فيما بينها يجب على المطور فهمها لاختيار الأسلوب المناسب لتخزين البيانات وفقًا لحالتهم الخاصة.
في هذه المدونة، سنستكشف الاختلافات الرئيسية بين ملفات تعريف الارتباط في جافا سكريبت، والتخزين المحلي، وتخزين الجلسة، بما في ذلك الحدود التخزينية، وإمكانية الوصول، ومعالجة انتهاء الصلاحية، وصيغة تخزين واسترداد البيانات. في نهاية المطاف، سيكون لديك فهم قوي لكل خيار وبإذن الله ستكون قادرًا على اختيار الأنسب لاحتياجات تطبيق الويب الخاص بك.
ما هي استخدامات ملفات تعريف الارتباط (cookies) والتخزين المحلي (local storage) وتخزين الجلسة (session) في JavaScript؟
تُستخدم الطرق الثلاثة لتخزين المعلومات في متصفح المستخدم ويمكن الوصول إليها حتى بعد التنقل إلى صفحات جديدة في موقعك. يتم حفظ هذه البيانات في المتصفح الذي يفتح به المستخدم موقعك او تطبيقك، لذا إذا كان موقعك مفتوحًا في Chrome، فسيتم حفظ المعلومات فقط في متصفح Chrome على الجهاز الحالي. وهذا يعني أنه إذا فتح موقعك في وقت لاحق باستخدام متصفح مختلف، فلن تكون هناك بيانات مخزنة. والآن دعنا ننتقل إلى الاختلافات العديدة بين كل خيار.
والان دعنا نفصل ونسهب في اوجه التطابق والاختلاف .
- حد السعة التخزينية storage limit
أحد الاختلافات الرئيسية هو الحد الأقصى لسعة التخزين لكل طريقة. يُسمح بتخزين كمية كبيرة من البيانات في التخزين المحلي وتخزين الجلسة بحدود تبلغ 10 ميجابايت و 5 ميجابايت على التوالي.
تنويه :هذه الأحجام تعتبر كبيرة بحيث لن تواجه أي مشاكل في تخزين البيانات (بالطبع نسبة للغرض الأساسي منها ففي الغالب تستخدم لتخزين بيانات نصية) .
أما ملفات تعريف الارتباط (cookies) فلديها حد أقل وهو 4 كيلوبايت فقط. على الرغم من أن هذا الحجم قد يبدو صغيرًا، إلا أنه من النادر أن تحتاج ملفات تعريف الارتباط إلى تخزين كميات كبيرة من البيانات، لذلك فإن تجاوز هذا الحد غير مرجح، لذا لا داعي للقلق بشأن هذا الحد.
إمكانية الوصول Access
بعد تخزين البيانات الخاصة بك، في نهاية المطاف ستحتاج إلى الوصول إليها، وكل طريقة تخزين لها مستويات مختلفة من الوصول.
يمكن الوصول إلى البيانات في التخزين المحلي من أي نافذة أو علامة تبويب مفتوحة تستخدم نفس النطاق (domain). وهذا يعني أنه إذا قمت بتعيين عنصر في علامة تبويب واحدة، يمكنك استرداده او الوصول اليه من علامة تبويب أخرى في نفس الموقع.
بالنسبه لتخزين الجلسة session كما يوحي الاسم، فالامر مختلف نوعا ما حيث يكون متاحًا فقط في علامة التبويب الحالية اي تلك التي قمت بتعيين بيانات تخزين الجلسة فيها. أسهل طريقة لتذكر هذا الاختلاف هو أن تخزين الجلسة مرتبط بجلسة معينة، وكل علامة تبويب في المتصفح الخاص بك هي جلسة مستقلة.
تعمل ملفات تعريف الارتباط cookies على مستوى النطاق نفسه مثل التخزين المحلي، ولكنها تتيح إمكانية إرسالها مع كل طلب HTTP، مما يتيح الوصول إليها على الخادم.
مجدداً، تشبه الكوكيز إلى حد كبير التخزين المحلي في أنها يمكن الوصول إليها من أي نافذة أو علامة تبويب بعد تعيينها، ولكن الشيء الذي يجعلها فريدة هو أن الكوكيز يمكن الوصول إليها أيضًا على الخادم (server). يحدث ذلك لأنه في كل طلب (HTTP request ) نقوم به إلى خادم الbackend الخاص بنا، يتم إرفاق جميع بيانات ملفات تعريف الارتباط الخاصة بنا أيضًا مع الطلب. مما يجعل ملفات تعريف الارتباط مثالية للمهام المتعلقة بالمصادقة.
معالجة انتهاء الصلاحية
Localstorage تبقى البيانات في التخزين المحلي مالم يتم إزالتها بشكل صريح (أي ازالتها من قبل المستخدم بمسح البيانات من المتصفح أو من قبل المطور عن طريق الكود).
التخزين في session : تُمسح بيانات تخزين الجلسة عند إغلاق نافذة المتصفح لأنها مرتبطة بالجلسة الحالية.
Cookies يمكن ضبط ملفات تعريف الارتباط لتنتهي في تاريخ/وقت محدد بعد أسبوع مثلاً، أو يمكن ضبطها لتنتهي عند إغلاق المتصفح باستخدام معلمات انتهاء الصلاحية المختلفة. وهذا يمنح المطور القدرة على التحكم في فترة صلاحية ملفات تعريف الارتباط.
طريقة الاستخدام Syntex (صيغة تخزين واسترجاع البيانات)
أخيرًا وليس آخراً، الاختلافات في الصياغة بين هذه الأساليب المختلفة للتخزين.ولكن قبل أن ننتقل إلى الاختلافات، من المهم أن نلاحظ أن التخزين المحلي وتخزين الجلسة لديهما نفس الصياغة تمامًا. الاختلاف الوحيد هو أن تخزين الجلسة يتم الوصول إليه باستخدام متغير sessionStorage والتخزين المحلي يستخدم متغير localStorage.
تستخدم local storage و session طرقًا بسيطة مشابهة لتعيين القيمة واستردادها وإزالتها باستخدام دوال .setItem() و.getItem() و.removeItem().
أما ملفات تعريف الارتباط، فيتطلب بناء سلسلة نصية تمرر عدة معلمات. واسترداد ملف تعريف الارتباط المحدد يتطلب تحليل جميع الكوكيز بدلاً من البحث المباشر. .
تخزين البيانات
لحفظ البيانات باستخدام التخزين المحلي local storage أو تخزين الجلسة session، يمكنك ببساطة استخدام دالة setItem. تأخذ هذه الوظيفة معاملين من نوع السلسلة. المعامل الأول هو الاسم والمعامل الثاني هو القيمة المرتبطة بهذا الاسم. يمكنك أن تفكر في ذلك بشكل مشابه جدًا لزوج المفتاح والقيمة في كائن JSON.
localStorage.setItem("name", "Kyle")
sessionStorage.setItem("name", "Kyle")
بالنسبة لتخزين ملفات تعريف الارتباط cookies، يكون الأمر أكثر تعقيدًا قليلاً. تحتاج إلى الوصول إلى كائن document.cookie وتعيينه ككوكيز. كل ما عليك فعله هو تعيين document.cookie إلى سلسلة نصية حيث يتم فصل الاسم والقيمة بواسطة علامة تساوي.
document.cookie = "name=Ali"
سيتم إنشاء كوكيز بالاسم "name" والقيمة "Ali"، ولكن هذا الكوكيز سيكون منتهي الصلاحية لأن تاريخ الانتهاء الافتراضي هو في الماضي. لتعيين تاريخ انتهاء يدويًا، نحتاج أيضًا إلى تمرير مفتاح "expires" قيمة تاريخ UTC. كما نحتاج إلى التأكد من فصل مفتاح "expires" عن مفتاح الاسم بفاصلة منقوطة.
document.cookie = `name=Ali; expires=${new Date(9999, 0, 1).toUTCString()}`
هذا ينشئ كوكيز بتاريخ انتهاء صلاحية في 01/01/9999، وهذا عملياً يعني إنشاء كوكيز لا تنتهي صلاحيته.
الآن إذا كنت ترغب في تخزين مجموعات متعددة من البيانات المختلفة، فقط تحتاج إلى تكرار الشيفرة أعلاه.
localStorage.setItem("name", "Ali")
localStorage.setItem("lastName", "Hassan")
sessionStorage.setItem("name", "Kyle")
sessionStorage.setItem("lastName", "Smith")
حتى مع الكوكيز، يمكنك فقط تعيين document.cookie إلى سلسلة نصية جديدة وسيتم إضافة كوكيز جديد دون أن يتم الكتابة فوق الكوكيز القديمة.
document.cookie = `name=Kyle; expires=${new Date(9999, 0, 1).toUTCString()}`
document.cookie = `lastName=Smith; expires=${new Date(
9999,
0,
1
).toUTCString()}`
استرجاع البيانات
للحصول على البيانات من التخزين المحلي وتخزين الجلسة، يكفي استدعاء طريقة getItem. تأخذ هذه الطريقة معاملًا واحدًا وهو اسم زوج المفتاح والقيمة، وستعيد القيمة.
localStorage.setItem("name", "Kyle")
localStorage.getItem("name") // Kyle
sessionStorage.setItem("name", "Kyle")
sessionStorage.getItem("name") // Kyle
الكوكيز أكثر صعوبة قليلاً لأنه لا يوجد طريقة للحصول على كوكيز فردي. الطريقة الوحيدة للحصول على الكوكيز هي الحصول على جميع الكوكيز دفعة واحدة عن طريق الوصول إلى كائن document.cookie.
document.cookie = `name=Kyle; expires=${new Date(9999, 0, 1).toUTCString()}`
document.cookie = `lastName=Smith; expires=${new Date(
9999,
0,
1
).toUTCString()}`
document.cookie // name=Kyle; lastName=Smithحذف وإزالة البيانات
كما هو الحال في الأمثلة السابقة، إزالة البيانات من التخزين المحلي وتخزين الجلسة يتم بسهولة عن طريق استدعاء طريقة واحدة. هذه الطريقة هي دالة removeItem وتأخذ معاملًا واحدًا وهو اسم المفتاح المراد إزالته.
localStorage.removeItem("name")
sessionStorage.removeItem("name")
الكوكيز كالمعتاد أكثر صعوبة. لإزالة كوكيز، تحتاج إلى تعيين الكوكيز مرة أخرى ولكن قم بإعطائه قيمة فارغة وتاريخ انتهاء صلاحية في الماضي.
document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT"
الأسئلة المتكررة:
س: هل يمكن تخزين نفس البيانات في كل من التخزين المحلي وتخزين الجلسة؟
ج: نعم، يمكنك تخزين نفس البيانات في كل من التخزين المحلي وتخزين الجلسة. إنهما آليتان منفصلتان للتخزين في المتصفح ولن تستبدل بعضهما البعض.
س: كيف يمكنني التحقق من المساحة المتاحة للتخزين في localStorage أو sessionStorage؟
ج: يمكنك التحقق من الاستخدام الحالي والحد الأقصى لـ localStorage و sessionStorage عن طريق عرض خصائص Storage.length و Storage.limit حيث يكون Storage اسم كائن التخزين (localStorage أو sessionStorage).
س: ما هي بعض الحالات الشائعة لكل نوع من أنواع التخزين؟
ج: تستخدم الكوكيز غالبًا للمصادقة، ويتم استخدام التخزين المحلي لتخزين البيانات على جانب العميل، وتستخدم تخزين الجلسة عندما تحتاج إلى الاحتفاظ بالحالة فقط لعلامة التبويب/النافذة الحالية للمتصفح.
الخلاصة:
على الرغم من أن التخزين المحلي وتخزين الجلسة والكوكيز متشابهة إلى حد ما، إلا أن هناك اختلافات طفيفة بينهما تجعل لكل منها حالات استخدام فريدة. أوصي دائمًا باستخدام تخزين الجلسة أو التخزين المحلي ما لم تحتاج بشكل محدد إلى الوصول إلى البيانات على الخادم، حيث أن العمل مع تخزين الجلسة والتخزين المحلي أسهل بكثير من العمل مع الكوكيز.
باختصار، يوفر JavaScript للمطورين الكوكيز والتخزين المحلي وتخزين الجلسة كخيارات لتخزين البيانات على متصفح العميل بإمكانات مختلفة. يُعتبر التخزين المحلي عمومًا الخيار الأفضل ما لم تحتاج صراحة إلى ميزات الكوكيز مثل الوصول عبر النطاقات المختلفة. فهم الاختلافات الدقيقة بين هذه أنواع التخزين سيساعدك على اختيار الحل الصحيح لاحتياجات تطبيق الواجهة الأمامية الخاصة بك.
مراجع :
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
