HTML Academy · درس

الحصول على العناصر وتعيينها وإزالتها

استخدام Web Storage API لقراءة البيانات وكتابتها

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

واجهة Storage API

يعرض كل من localStorage وsessionStorage الطرق الأساسية الأربع نفسها: getItem(key) وsetItem(key, value) وremoveItem(key) وclear(). وهما مخزنا مفتاح وقيمة بسيطان يدعمهما المتصفح.

يخزّن setItem السلاسل النصية

تعمل localStorage.setItem("theme", "dark") على حفظ سلسلة نصية تحت المفتاح "theme". يجب أن يكون كل من المفتاح والقيمة سلسلة نصية؛ إذ تُحوّل القيم غير النصية قسرًا باستخدام String() قبل التخزين، مما يؤدي بصمت إلى إفساد الكائنات والمصفوفات.

localStorage.setItem("theme", "dark");
localStorage.setItem("count", "42");

تخزين الكائنات باستخدام JSON

لتخزين البيانات المهيكلة، حوّلها إلى تسلسل باستخدام JSON: localStorage.setItem("user", JSON.stringify(user)). ثم اقرأها مجددًا: const user = JSON.parse(localStorage.getItem("user")). احرص دائمًا على إحاطة عملية التحليل بـ try/catch تحسبًا لكون القيمة المخزنة غير سليمة.

const user = { name: "Ada", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
const loaded = JSON.parse(localStorage.getItem("user"));

يعيد getItem سلسلة نصية أو null

تعيد getItem("missing") القيمة null عند عدم وجود المفتاح، ولا تعيد undefined مطلقًا. استخدم عامل الدمج مع null لتوفير قيم افتراضية: const theme = localStorage.getItem("theme") ?? "light".

صيغة الوصول إلى الخصائص

يمكنك أيضًا استخدام صيغة الأقواس والنقاط: localStorage.theme = "dark" وlocalStorage["theme"]. تعمل الصيغتان، لكنهما تخفيان القصد؛ لذا يُفضّل استخدام استدعاءات الطرق الصريحة التي توضّح أن هذا تخزين مستمر وليس خاصيةً لكائن.

removeItem وclear

تحذف localStorage.removeItem("theme") مفتاحًا واحدًا. وتمسح localStorage.clear() جميع المفاتيح الخاصة بالأصل الحالي. تُعد clear() عملية مدمّرة؛ فلا تستدعها مطلقًا من دون سبب قوي، لأنها تزيل البيانات التي عيّنها كل نص برمجي في الصفحة.

التكرار على المفاتيح المخزنة

استخدم localStorage.length وlocalStorage.key(index) لاستعراض جميع المفاتيح المخزنة، أو استخدم Object.keys(localStorage) مع عامل التوسيع. يفيد ذلك في عمليات الترحيل وتصحيح الأخطاء والتنظيف القائم على البادئات، مثل إزالة جميع المفاتيح التي تبدأ بـ "cache:".

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

أخطاء تجاوز الحصة

تخصص المتصفحات نحو 5 إلى 10 ميجابايت لكل أصل. ويؤدي تجاوز الحصة إلى طرح QuotaExceededError. أحط setItem بـ try/catch عند تخزين قيم قد تكون كبيرة، مثل ذاكرة التخزين المؤقت للصور أو مسودات المستندات، حتى لا يتعطل التطبيق بسبب الخطأ.

try {
  localStorage.setItem("draft", largeString);
} catch (e) {
  if (e.name === "QuotaExceededError") {
    // free space, warn user, or fall back
  }
}

تخصيص نطاقات للمفاتيح

يشترك الأصل بالكامل في التخزين. أضف بادئة إلى مفاتيحك تتضمن اسم التطبيق أو الميزة (app:settings وcart:items) لتجنب التعارض مع النصوص البرمجية الأخرى والمكتبات التابعة لجهات خارجية وإضافات المتصفح التي تعمل على الأصل نفسه.

التزامن والحجب

تعمل Storage API بشكل متزامن بالكامل؛ إذ يحجب كل استدعاء سلسلة التعليمات الرئيسية حتى تكتمل عمليات الإدخال والإخراج على القرص. تجنب تخزين الكتل الكبيرة جدًا أو استدعاء setItem داخل حلقات ضيقة، وبدلًا من ذلك اجمع التحديثات في كائن واحد متسلسل.

sessionStorage مقارنةً بـ localStorage

واجهة API نفسها، لكن مدة الحياة مختلفة. يُمسح sessionStorage عند إغلاق علامة التبويب، بينما يستمر localStorage بعد إعادة تشغيل المتصفح. اختر sessionStorage لحالة المعالج المؤقتة، وlocalStorage لتفضيلات المستخدم التي ينبغي أن تبقى بعد إعادة التحميل.

اختبار المعرفة

ماذا تعيد localStorage.getItem("missing-key") عندما لا يكون المفتاح قد عُيّن من قبل؟

ملخص

تُعد getItem وsetItem وremoveItem وclear الركائز الأربع لـ Web Storage. تكون القيم دائمًا سلاسل نصية، لذا غلّف البيانات المهيكلة باستخدام JSON. خطط للتعامل مع القيم null وQuotaExceededError وتخصيص نطاقات المفاتيح، حتى يتشارك الأصل بأمان مع النصوص البرمجية الأخرى.

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

هل درس «الحصول على العناصر وتعيينها وإزالتها» مجاني؟

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

ماذا ستتعلم في «الحصول على العناصر وتعيينها وإزالتها»؟

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

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

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

كم من الوقت يستغرق درس «الحصول على العناصر وتعيينها وإزالتها»؟

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

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

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

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

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