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

كلاهما مخزنين يستخدمان لتخزين أي بيانات خاصة بنطاق معين، الفرق هو عمر صلاحية هذه البيانات:

• sessionStorage: تخزن البيانات فقط للتبويب الذي تم داخله حفظ البيانات في هذا المخزن، وعند اغلاق التبويب (أي انتهاء جلسة المستخدم) يتم حذف جميع البيانات
• localStorage: تخزن البيانات دائما ولا يتم حذفها إلا باستدعاء الأمر removeItem، ويمكن الوصول اليها في وقت لاحق حتى لو تم إغلاق صفحة الموقع

// localStorage

localStorage.setItem('name', 'خالد');

// بعد إغلاق وفتح المستخدم لصفحة الموقع

localStorage.getItem('name'); // 'خالد'


// sessionStorage

sessionStorage.setItem('name', 'خالد');

// بعد إغلاق وفتح المستخدم لصفحة الموقع

sessionStorage.getItem('name'); // null

الطريقتين متشابهتين بصورة كبيرة لكن localStorage  لديها زمن إنتهاء مختلف. sessionStorage  يمكن الوصول لمحتوياتها طالما كانت النافذة التي تم إنشاء الجلسة بها مفتوحة، localStorage  تكون الجلسة مفتوحة طالما لم تمسحها.

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