Web Storage في HTML
سابقاً كان canvas سطحاً نقطياً يلوّنه JavaScript. هذا الدرس يترك الرسم ويقدّم Web Storage: تذكّر سلاسل مفتاح/قيمة صغيرة في المتصفح بـ localStorage وsessionStorage. HTML يحمّل سكربتاً؛ السكربت يستدعي واجهات التخزين. النطاق عملي — حفظ/قراءة وعمر البيانات — لا ملفات تعريف ارتباط أو IndexedDB أو قواعد خادم.
لماذا web storage في دورة HTML
المبتدئ يريد أن يبقى مظهر أو اسم بعد التحديث. Web Storage الأداة الأولى الشائعة. بعد رسم canvas، التقسيم هنا مختلف: HTML يملك الغلاف؛ JS يملك تذكّر السلاسل لذلك الأصل. يكفي setItem وgetItem ومعرفة عمر local مقابل session.
إجابة مباشرة
1) من JS: localStorage.setItem. 2) اقرأ بـ getItem. 3) localStorage للبقاء حتى المسح. 4) sessionStorage لجلسة التبويب. 5) لا وسم HTML بديلاً. 6) تفضيلات خفيفة فقط؛ الكائنات تحتاج JSON لأن القيم سلاسل.
📊 localStorage vs sessionStorage
| Topic | localStorage | sessionStorage |
|---|---|---|
| Typical lifetime | Until cleared by user/site/code | Until the tab/session ends |
| Survives browser restart | Usually yes (same origin) | No |
| Shared across tabs (same origin) | Yes (same storage) | No (per tab/session) |
| API shape | setItem / getItem / removeItem | Same method names |
| Beginner fit | Theme, language preference | One-tab wizard draft, temp flags |
| This course depth | Intro save/read only | Intro save/read only |
عرض localStorage صغير
زر يحفظ تحية ويعرضها في فقرة. بعد التحديث يبقى getItem يجد القيمة لذلك الأصل.
<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>
قراءة استدعاءات localStorage
- localStorage كائن متصفح للسكربت
- setItem يخزّن السلسلة
- getItem يقرأها أو null
- العرض في p يثبت الاستمرار دون رسم (بخلاف canvas)
- المفاتيح والقيم سلاسل
- المسح: removeItem أو أدوات المطوّر
sessionStorage لبيانات التبويب فقط
نفس أسماء الطرق لكن عمراً أقصر. مفيد لمسودة تبويب واحد تختفي عند الإغلاق.
<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>
قراءة فكرة sessionStorage
- نفس نمط setItem/getItem
- تُستعاد عند التحديث داخل نفس التبويب
- تبويب آخر لا يرى نفس البيانات عادة
- ما زالت سلاسل؛ ليست لكلمات المرور
- اختر local أو session حسب العمر
- التالي: geolocation
اختيار ماذا تُخزّن
- مظهر/لغة: localStorage
- خطوة معالج لهذا التبويب: sessionStorage
- أسرار: لا شيء منهما
- ملفات كبيرة: خارج هذه المقدمة
- حسابات الخادم: خلفية
- رسم بكسل: كان canvas
تمرين — تذكّر تفضيلاً
- الصق عرض localStorage واحفظ.
- حدّث الصفحة؛ أكّد الاستعادة.
- جرّب sessionStorage في نفس التبويب.
- أغلق التبويب وافتح مجدداً.
- جرّب رقماً ولاحظ أنه يعود سلسلة.
- جملة: canvas يرسم؛ Web Storage يحفظ سلاسل.
- التالي geolocation.
أخطاء سهلة
- توقع وسم storage
- تخزين كلمات المرور
- نسيان أن القيم سلاسل
- خلط التخزين مع canvas أو الكوكيز
- افتراض بقاء sessionStorage للأبد
- افتراض مشاركة أجهزة أخرى
- اعتبار المقدمة دورة قواعد بيانات
ملخص
- Web Storage واجهة JS: localStorage وsessionStorage
- setItem/getItem يحفظان سلاسل للأصل
- local حتى المسح؛ session للتبويب
- لتفضيلات خفيفة لا للأسرار
- canvas كان بكسلات؛ هنا سلاسل متذكَّرة
- التالي: geolocation في HTML
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى