التخزين على الويب
السطر الذي يراه الزائر هو saved / lida / tea، لأن الصفحة أودعت الضيف lida والمشروب tea. تلك وديعة صغيرة يحتفظ بها المتصفح لهذا الموقع وحده. localStorage لا يختفي حين يُغلق المتصفح.
ليست صفحة الأنماط
getItem يعيد null إذا لم يجد المفتاح، ولا يرمي استثناءً. صفحة الأنماط كانت قد وقفت عند true / Order: mint. الكوكيز تأتي في درس لاحق. هذا التخزين لا يُرفق بكل طلب يخرجه المتصفح.
القيمة تُكتب نصاً
حتى لو سلّمت رقماً، يُحفظ على هيئة نص. setItem يكتب تحت مفتاح، وgetItem يقرأ ما كُتب.
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
size لم يُكتب قط، لذلك يظهر في السجل tea ثم null، ومن غير خطأ. setItem("count", 2) يضع المحارف 2 لا العدد نفسه. أعد تحميل الصفحة: getItem("drink") ما زال tea.
الكائن لا يسافر حياً
اقرأ القيمة أولاً. إن كانت null فلا تستدعِ JSON.parse، لأن JSON.parse(null) يرمي خطأ. JSON.stringify يصنع نصاً يمكن حفظه، وJSON.parse يعيد بناء الكائن. تمرير كائن عادي إلى setItem يحفظ النص [object Object].
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
المفتاح w3-order يحمل نصاً، والقيمة بعد التحليل تعود كائناً. السجل lida / tea. أي صفحة على هذا الأصل نفسه تستطيع قراءة ذلك المفتاح.
عمر التبويب وعمر المتصفح
لا تستدعِ clear لترتيب طلب واحد، فهو يمسح كل مفاتيح هذا الأصل. removeItem يحذف مفتاحاً واحداً. sessionStorage يملك setItem وgetItem وremoveItem، ويعيش حتى يُغلق ذلك التبويب. localStorage يظل موجوداً حين يُفتح المتصفح من جديد.
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
إغلاق التبويب يُسقط ملاحظة الجلسة وحدها. مفتاح localStorage المسمى w3-order حاضر في التبويبين. التبويب الثاني لا يرى مفتاح sessionStorage ذاك. السجل mint ثم null.
صندوق الأصل لا صندوق الملف
موقع آخر لا يستطيع القراءة. مفتاح وُضع في الصفحة الرئيسية يظهر في صفحة الطلب على الموقع نفسه. الصندوق مشترك بين المخطط والمضيف والمنفذ، وليس صندوق ملف واحد.
ماذا تكتب الصفحة
الصفحة تكتب الطلب، تقرأه من جديد، ثم تعرض الضيف والمشروب.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
true / Order: mint كان سطر صفحة الأنماط. أعد التحميل فتعود الكلمات نفسها من localStorage. السطر هنا يُقرأ saved / lida / tea.
خمس خطوات على المنضدة
- اكتب drink بالقيمة tea عبر setItem. getItem يعيد tea.
- اطلب المفتاح size. getItem يعيد null.
- احفظ الطلب بـ JSON.stringify. بعد JSON.parse يصير السجل lida / tea.
- ضع mint في sessionStorage ثم احذفه بـ removeItem. getItem يعيد null.
- اقرأ الصفحة. السطر saved / lida / tea.
حيث يزلّ القارئ
التخزين يتذكر السلاسل لا الكائنات الحية. clear يخص الأصل كله لا مفتاحاً واحداً.
- تمرير كائن إلى setItem ثم قراءة [object Object]
- استدعاء JSON.parse على null
- توقّع أن يبقى sessionStorage في تبويب جديد
- استدعاء clear فتُمسح كل المفاتيح
- قراءة السطر على أنه true / Order: mint
خذه معك
- setItem وgetItem يخزّنان السلاسل ويقرآنها
- المفتاح الغائب null
- الكائن يدخل بـ JSON.stringify ويخرج بـ JSON.parse
- localStorage يصمد بعد إعادة التشغيل
- sessionStorage ينتهي مع التبويب
- سطر الصفحة saved / lida / tea
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى