JSON, localStorage, and your first fetch

अपने डेटा को JSON के रूप में serialize करें, इसे localStorage से ब्राउज़र में बनाए रखें, और fetch से दूरस्थ डेटा प्राप्त करें।

10 मिनट · 3 प्रश्न

JSON वेब का सार्वभौमिक विनिमय प्रारूप है: यह टेक्स्ट है जिसका सिंटैक्स JavaScript ऑब्जेक्ट्स जैसा दिखता है (keys दोहरे उद्धरण चिह्नों में, कोई फ़ंक्शन नहीं)। आपको बस दो मेथड्स की ज़रूरत है: 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 से पहले serialize करें, getItem के बाद deserialize करें।

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 अनुरोध भेजता है और एक promise लौटाता है। 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. किसी मौजूद न होने वाली key के लिए localStorage.getItem क्या लौटाता है?
   • एक खाली स्ट्रिंग
   • undefined
   • null
   • एक एरर फेंकी जाती है
3. केवल response.json() के बजाय await response.json() क्यों लिखें?
   • क्योंकि response.json() एक promise लौटाता है
   • प्रतिक्रिया को एक स्ट्रिंग में बदलने के लिए
   • अनुरोध विफल होने पर उसे फिर से आज़माने के लिए