JavaScript Academy · درس

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

سلسِلوا الكائنات لتخزينها واستعادتها.

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

لا يخزّن Storage سوى السلاسل النصية

يخزّن Web Storage السلاسل النصية، لذلك لا يمكنك حفظ كائن مباشرةً. ويؤدي حفظه إلى إنتاج النص غير المفيد "[object Object]". والحل هو JSON.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

التسلسل باستخدام JSON.stringify

حوّل الكائن إلى سلسلة JSON باستخدام JSON.stringify قبل تخزينه.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

إلغاء التسلسل باستخدام JSON.parse

عند القراءة، حوّل السلسلة مرة أخرى إلى كائن باستخدام JSON.parse.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

دورة التحويل الكاملة

النمط الكامل هو: حوّل إلى سلسلة عند الحفظ، وحوّل إلى كائن عند القراءة. وينطبق ذلك على الكائنات والمصفوفات على حد سواء.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

التعامل مع حالة null

تعيد JSON.parse(null) القيمة null (ولا تطلق خطأً)، لكن تحليل البيانات المفقودة قد يسبب مفاجآت. وفّر قيمة افتراضية بديلة.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

الحماية من تلف البيانات

إذا كانت JSON المخزنة غير صالحة، فإن JSON.parse يطلق SyntaxError. غلّفها ضمن try/catch حتى لا يؤدي إدخال تالف واحد إلى تعطل تطبيقك.

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

مساعد حفظ قابل لإعادة الاستخدام

غلّف خطوة التحويل إلى سلسلة ضمن مساعد حتى لا تنساها أبدًا.

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

ما الذي يحذفه JSON

لا يستطيع JSON تمثيل الدوال أو undefined أو كائنات Date (إذ تتحول إلى سلاسل نصية) أو Map أو Set. خطط وفقًا لذلك؛ خزّن التواريخ كسلاسل ISO وأعد إنشاءها عند القراءة.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

استعادة التواريخ

بما أن التواريخ تُسلسل إلى سلاسل نصية، حوّلها مرة أخرى بعد التحليل إذا كنت بحاجة إلى أساليب Date.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

تحديث البيانات المتداخلة

لتغيير جزء من كائن مخزن، اقرأه، وعدّل النسخة، ثم اكتبها مرة أخرى. لا يوفر Storage واجهة API للتحديث الجزئي.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

إصدار أشكال البيانات المخزنة

تتغير أشكال بيانات التطبيق بمرور الوقت. يتيح لك تخزين حقل version ترحيل البيانات القديمة أو تجاهلها عند تطور التنسيق.

saveJSON("prefs", { version: 2, theme: "dark" });

اختبار سريع

تخزين الكائنات في Web Storage.

مراجعة

يخزّن Storage السلاسل النصية، لذا طبّق JSON.stringify على الكائنات قبل حفظها، وJSON.parse عند قراءتها. احمِ عملية التحليل باستخدام try/catch ووفّر قيمًا افتراضية. تذكّر أن JSON يحذف الدوال وundefined ويحوّل التواريخ إلى سلاسل نصية. حدّث البيانات المتداخلة من خلال القراءة والتعديل وإعادة الكتابة، وفكّر في استخدام إصدارات لأشكال البيانات المخزنة.

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

هل درس «تخزين الكائنات باستخدام JSON» مجاني؟

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

ماذا ستتعلم في «تخزين الكائنات باستخدام JSON»؟

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

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

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

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

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

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

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

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

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