JSON وlocalStorage وأول عملية fetch لك

حوّل بياناتك إلى JSON، واحفظها في المتصفح باستخدام localStorage، واسترجع البيانات البعيدة باستخدام fetch.

10 دقيقة · 3 أسئلة

JSON هو صيغة التبادل العالمية للويب: إنه نص تشبه صياغته كائنات JavaScript (مفاتيح بين علامتي اقتباس مزدوجتين، من دون دوال). يكفيك تابعان: JSON.stringify يحوّل قيمة JavaScript إلى نص، وJSON.parse يفعل العكس.

const task = { title: "Review the lesson", done: false };

const json = JSON.stringify(task);
console.log(json);
// {"title":"Review the lesson","done":false}

const parsed = JSON.parse(json);
console.log(parsed.done); // false

يحفظ localStorage البيانات في المتصفح، حتى بعد إغلاق التبويب. إنه مثالي لسمة مختارة أو مسودة أو قائمة مهام. وبما أنه لا يخزّن إلا نصًا، يعمل JSON كجسر: حوّل قبل setItem، وفكّك بعد getItem.

const tasks = [
  { title: "Buy bread", done: false },
  { title: "Review the lesson", done: true }
];

localStorage.setItem("tasks", JSON.stringify(tasks));

const raw = localStorage.getItem("tasks");
const saved = raw ? JSON.parse(raw) : [];
console.log(saved.length); // 2

اللبنة الأخيرة: جلب البيانات من خادم. يرسل fetch طلب HTTP ويُعيد وعدًا. مع async/await، تُقرأ الشيفرة من الأعلى إلى الأسفل: تنتظر الاستجابة، وتتحقق من صحتها، ثم تنتظر فك ترميز JSON الذي هو أيضًا غير متزامن.

async function loadUsers() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  );
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const users = await response.json();
  console.log(users[0].name);
}

loadUsers();

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

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ماذا يفعل JSON.stringify؟
   • يحوّل نص JSON إلى كائن JavaScript
   • يحوّل قيمة JavaScript إلى نص JSON
   • يتحقق من صحة صياغة ملف JSON
2. ماذا يُعيد localStorage.getItem لمفتاح غير موجود؟
   • نص فارغ
   • undefined
   • null
   • يُطلَق خطأ
3. لماذا تكتب await response.json() بدلًا من response.json() ببساطة؟
   • لأن response.json() يُعيد وعدًا
   • لتحويل الاستجابة إلى نص
   • لإعادة محاولة الطلب إذا فشل