Summary

In this lesson, you learned that:

• A server is a computer on the internet that keeps the files of a website and sends them to whoever asks. A page can ask it for data, too.
• Data travels as text, usually in JSON. It looks like arrays and objects in JavaScript, but keys and text are always in double quotes, there's no comma after the last item, and there are no comments. Files with JSON end in .json.
• JSON.parse(text) turns JSON text into arrays and objects; JSON.stringify(value) turns them into JSON text.
• await fetch("animals.json") asks the server for a file and waits for the response; await response.json() reads its content as JSON. Both belong in an async function, and the data can be used only after them.
• response.ok is false when the server answered with an error, such as 404 Not Found for a misspelled file name. Check it, and show an error message instead of the data.
• A message such as Loading… tells the user that the data is on its way. Show it before fetch(), and remove it when the data is on the page.
• Keep fetched data in a variable, and draw the page from it with a function that you call again whenever something changes, with createElement() and the array methods.
• localStorage keeps data in the browser, even after a reload: setItem(key, value) saves, getItem(key) reads (null when nothing is saved) and removeItem(key) deletes.
• localStorage keeps only text, so save arrays and objects with JSON.stringify() and read them with JSON.parse(). Load what was saved as soon as the page opens.

In the next lesson, a checkpoint, you'll build a small app for choosing a film for a film night: it loads the films from a file, lets you search them and remembers your favorites.

But first, some practice: a page of recipes with a checkbox that shows only the vegetarian ones, and that remembers whether it's ticked.