ما الفرق بين cookies و sessionStorage وlocalStorage

بتاريخ منذ ساعة مضت قال Abdelrahman Mostafa10:

أعمل على مشروع حاليًا، واستخدم به وlocalStorage لكن في الشروحات أرى أحيانًا استخدام لـ sessionStorage  وأحيانًا cookies فما الفرق ومتى استخدم كل منهم في المشروع، أنا أعلم التعريف الخاص بهم لكن الاستخدام ليس لدي دراية به ما الفائدة منهم ومتى لا ينصح باستخدامهم؟

سأوضح الفرق بين localStorage و sessionStorage و cookies:

localStorage: يستخدم لتخزين البيانات بشكل دائم حتى بعد إغلاق المتصفح. مفيد جداً لتخزين البيانات الشخصية للمستخدم مثل الإعدادات.

 يفضل استخدامه عندما تحتاج إلى الاحتفاظ بالبيانات لفترة طويلة، وترغب في الوصول إليها حتى بعد إعادة فتح المتصفح.

لا يفضل استخدامه عندما لا ينصح بتخزين كميات كبيرة من البيانات غير الضرورية حيث تبقى مخزنة بشكل دائم, وتجنب تخزين معلومات حساسة مثل البيانات المالية أو الصحية بسبب عدم أمانها.

- مثال: حفظ إعدادات التفضيلات في تطبيق.
     - عندما يقوم المستخدم بتغيير خلفية التطبيق أو اللغة المفضلة، يمكن حفظ هذه التفضيلات باستخدام `localStorage` لكي يظلوا سارين حتى بعد إعادة فتح المتصفح.

sessionStorage: يخزن البيانات فقط أثناء فترة عمل الجلسة (tab) في المتصفح. يستخدم عادة لحفظ حالة التطبيق أثناء تصفح المستخدم للصفحات.

يفضل استخدامه عندما تحتاج إلى تخزين بيانات تكون ذات فائدة فقط خلال جلسة التصفح الحالية، ولا تحتاج إليها بعد إغلاق المتصفح.

لا يفضل استخدامه عند تخزين به معلومات لابد من بقائها بعد انتهاء الجلسة مثل تفضيلات المستخدم. 

- مثال: تخزين استبيان أثناء جلسة التصفح الحالية.
     - عندما يقوم بملء استبيان، يمكن استخدام `sessionStorage` لتخزين الإجابات خلال جلسة التصفح الحالية عند رجوعه لها ولم يغلق المتصفح سيجد اجاباته ويكمل عليها.

cookies: تخزن بيانات على جهاز المستخدم وترسل مع كل طلب. يمكن استخدامها لتتبع أنشطة المستخدم أو تسجيل الدخول.

 له تاريخ انتهاء فيمكن تحديد تاريخ انتهاء لـ `cookies`، حيث يُمكن أن تبقى البيانات حتى هذا التاريخ أو حتى يتم حذفها يدوياً.

   متى يفضل استخدامه عندما تحتاج إلى تخزين البيانات على الجهاز العميل مع تحديد مدة صلاحيتها, او عند الحاجة إلى مشاركة البيانات بين المتصفح والخادم في كل طلب.

 - مثال: حفظ معرف الجلسة لتحقيق تسجيل الدخول الآمن.
     - عند تسجيل الدخول، يُمكن حفظ معرف الجلسة في `cookies` مع تحديد فترة صلاحيته لضمان بقاء المستخدم مسجلًا حتى بعد إعادة فتح المتصفح.
و تذكر المستخدم وتسجيله تلقائيا عند زيارته للموقع مرة أخرى.