JavaScript Academy · درس

تخزين البيانات وقراءتها

استخدموا setItem وgetItem وremoveItem.

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

تخزين المتصفح بنظام المفتاح والقيمة

يوفّر Web Storage لكل origin مخزنًا بسيطًا بنظام المفتاح والقيمة في المتصفح. تشترك واجهتا localStorage وsessionStorage في الأساليب نفسها، ولا تخزّنان سوى السلاسل النصية.

الكتابة باستخدام setItem

احفظ قيمة باستخدام setItem(key, value). كلتا الوسيطتين سلسلتان نصيتان.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

القراءة باستخدام getItem

استرجع قيمة باستخدام getItem(key). إذا لم يكن المفتاح موجودًا، فستعيد null وليس undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

الوصول إلى الخصائص

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

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

إزالة عنصر واحد

احذف إدخالًا واحدًا باستخدام removeItem(key). إزالة مفتاح غير موجود عملية آمنة لا ينتج عنها أي تأثير.

localStorage.removeItem("username");

مسح كل شيء

يمسح clear() جميع المفاتيح الخاصة بـ origin الحالي. استخدمه بحذر؛ فلا توجد طريقة للتراجع.

localStorage.clear();

كل شيء سلسلة نصية

لا يخزّن Storage سوى السلاسل النصية. تُحوَّل الأرقام والقيم المنطقية إلى نصوص. اقرأها كسلاسل نصية ثم حوّلها حسب الحاجة.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

عدّ المفاتيح

توضح الخاصية length عدد المفاتيح المخزنة، بينما تعيد key(index) اسم المفتاح الموجود في موضع معين. وهذا مفيد للتكرار.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

التكرار على Storage

كرّر على جميع المفاتيح المخزنة باستخدام length وkey(). واقرأ قيمة كل مفتاح أثناء التكرار.

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

التحقق من الوجود

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

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

الأصل نفسه فقط

يقتصر Storage على origin (المخطط + المضيف + المنفذ). لا يستطيع موقع قراءة Storage الخاص بموقع آخر، ويُعدّ http وhttps أصلين مختلفين.

اختبار سريع

قراءة Web Storage والكتابة فيه.

مراجعة

Web Storage مخزن نصي بنظام المفتاح والقيمة لكل origin. استخدم setItem وgetItem (الذي يعيد null عند غياب القيمة) وremoveItem وclear. كرّر باستخدام length وkey(i). كل شيء سلسلة نصية، لذا حوّل الأنواع بنفسك، كما أن Storage معزول لكل origin.

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

هل درس «تخزين البيانات وقراءتها» مجاني؟

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

ماذا ستتعلم في «تخزين البيانات وقراءتها»؟

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

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

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

كم من الوقت يستغرق درس «تخزين البيانات وقراءتها»؟

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

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

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

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

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