JavaScript Academy · درس

localStorage مقابل sessionStorage

اختاروا مدة التخزين المناسبة.

localStorage مقابل sessionStorage درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

مخزنان وواجهة API واحدة

تشترك localStorage وsessionStorage في الأساليب نفسها تمامًا. والفرق بينهما هو مدة البقاء: أي المدة التي تبقى فيها البيانات.

استمرارية localStorage

تبقى البيانات في localStorage حتى تُزال صراحةً. وتظل موجودة بعد إعادة تحميل الصفحات وإغلاق علامات التبويب وإعادة تشغيل المتصفح.

localStorage.setItem("theme", "dark");
// Still there days later, after closing the browser

مؤقتية sessionStorage

تستمر البيانات في sessionStorage طوال جلسة علامة التبويب فقط. ويؤدي إغلاق علامة التبويب إلى مسحها.

sessionStorage.setItem("step", "2");
// Gone once the tab is closed

العزل لكل علامة تبويب

تحصل كل علامة تبويب في المتصفح على sessionStorage الخاص بها. وتملك علامتا تبويب للموقع نفسه مخزني جلسات منفصلين؛ ولا تتشاركان البيانات.

مشاركة localStorage

وعلى العكس، تشترك جميع علامات التبويب والنوافذ الخاصة بـ origin نفسه في localStorage واحد. وتظهر الكتابة في إحدى علامات التبويب للأخرى.

سلوك إعادة التحميل

تحافظ إعادة التحميل العادية على sessionStorage لعلامة التبويب نفسها. وقد يؤدي تكرار علامة تبويب إلى نسخ الجلسة، لكن فتح علامة تبويب جديدة يبدأ بمخزن فارغ.

sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tab

الاختيار بينهما

استخدم localStorage للتفضيلات طويلة الأمد (مثل السمة واللغة). واستخدم sessionStorage للحالة المؤقتة الخاصة بعلامة تبويب (مثل خطوة في معالج أو مسودة نموذج تُستخدم مرة واحدة).

تنبيه أمني

لا يُعدّ أي من المخزنين آمنًا. إذ يمكن لأي نص برمجي في الصفحة قراءتهما، لذلك لا تخزّن كلمات المرور أو الرموز الحساسة التي يجب أن تبقى خاصة.

الأساليب نفسها في كل مكان

بما أن واجهتي API متطابقتان، يمكنك استبدال أحدهما بالآخر من خلال تغيير اسم الكائن فقط. ويعمل الكود المكتوب لأحدهما مع الآخر.

const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");

التصفح الخاص

في أوضاع التصفح الخاص أو المتخفي، يُمسح كلا المخزنين عادةً عند انتهاء الجلسة، كما تفرض بعض المتصفحات قيودًا عليهما أو تعطلّهما. تعامل دائمًا مع احتمال فشل عملية الكتابة.

try {
  localStorage.setItem("k", "v");
} catch (e) {
  console.log("storage unavailable");
}

الحصة منفصلة

لكل مخزن حصته الخاصة (عادةً نحو 5MB لكل origin). ولا يؤدي امتلاء sessionStorage إلى استهلاك حصة localStorage.

اختبار سريع

مقارنة المخزنين.

مراجعة

يشترك المخزنان في واجهة API نفسها، لكنهما يختلفان في مدة البقاء. يستمر localStorage عبر الجلسات وتشاركه جميع علامات التبويب التابعة لـ origin واحد، بينما يستمر sessionStorage لجلسة علامة تبويب واحدة فقط ويكون معزولًا لكل علامة تبويب. ولا يُعدّ أي منهما آمنًا، ولكل واحد منهما حصة خاصة تبلغ نحو 5MB.

الأسئلة الشائعة

هل درس «localStorage مقابل sessionStorage» مجاني؟

نعم — نص درس «localStorage مقابل sessionStorage» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «localStorage مقابل sessionStorage»؟

اختاروا مدة التخزين المناسبة. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «localStorage مقابل sessionStorage»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy