Skip to content
Chapter 06 of 07 · 3 lessons · ~27 min

Working With Data

Load data from APIs with fetch, write clean asynchronous code with async/await, and save information in the browser with localStorage.

YOUR PROGRESS0%
/ Lessons in this chapter
14
How to Use Fetch API in JavaScript How to load data from an API with fetch, show it on the page, and handle loading and errors. Coming soon
15
Async/Await in JavaScript Explained Simply How promises work, and how async/await makes asynchronous code read like normal step-by-step code. Coming soon
16
How to Use localStorage in JavaScript How to save small amounts of data in the visitor's browser so it's still there after a reload. Coming soon

Chapter practice task

Task: Add a live data section and a saved preference to your site

  1. Fetch a list of items from a public JSON API.
  2. Show a loading message, then the results as cards.
  3. Show a friendly message if the request fails.
  4. Rewrite the code with async/await and try/catch.
  5. Save one preference (like a selected filter) in localStorage and restore it on reload.

By the end of this chapter

  • You can request JSON data with fetch and display it on the page
  • You can write asynchronous code with async/await and handle errors
  • You can store and read data in localStorage

Quick answers for this chapter

What’s an API?

A URL that returns data (usually JSON) instead of a web page, so your code can use it.

Do I need a server for this?

Not for reading public APIs. Your code runs in the browser and requests the data directly.

Is localStorage a database?

No. It’s small, per-browser storage for settings and drafts, not for important or shared data.