من سلسلة تغريدات قديمة

تخزين الويب: localStorage و sessionStorage

هذه المقالة مبنية على سلسلة تغريدات كتبتها قبل فترة عن Web Storage. الفكرة كانت بسيطة: وش الفرق بين localStorage و sessionStorage؟ ومتى أستخدم كل واحد في JavaScript؟

وش يسوون؟

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

localStorage

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

sessionStorage

sessionStorage قريب جدًا في طريقة الاستخدام، لكن البيانات تعيش داخل الجلسة الحالية فقط. إذا قفل المستخدم التبويب، تنحذف البيانات. هذا مفيد للأشياء المؤقتة: خطوة داخل نموذج، حالة شاشة، أو بيانات ما أبغاها تبقى بعد انتهاء الجلسة.

الطريقة الأساسية

الـ API بسيط جدًا. تحفظ بـ setItem، تقرأ بـ getItem، وتحذف بـ removeItem.

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
localStorage.removeItem("theme");

sessionStorage.setItem("step", "checkout");
const step = sessionStorage.getItem("step");

أشياء أنتبه لها

• القيم تنحفظ كنصوص، فإذا عندي object أستخدم JSON.stringify و JSON.parse.
• ما أحفظ معلومات حساسة مثل كلمات المرور أو التوكنات المهمة.
• البيانات مرتبطة بالموقع نفسه، يعني نفس البروتوكول والدومين والمنفذ.
• إذا احتجت البيانات تبقى مدة طويلة، أستخدم localStorage. إذا احتجتها مؤقتًا، أستخدم sessionStorage.

الخلاصة: الاثنين أدوات صغيرة لكنها مفيدة جدًا في الواجهات. الفرق بينهم بسيط، لكن اختياره صح يخلي تجربة المستخدم أنظف ويخفف شغل متكرر على التطبيق.