Web apps can keep data on the device
localStorage is a small store of text inside the browser. A web app can save a value under a name and read it again after the page is closed. This is how a habit list survives a reload.
It is simple and fast, but it has limits, and you need to know what can go wrong.
By the end of this lesson
Note
I can keep data on the device and say when it can be lost.
Key words
| Word | What it means | Example |
|---|---|---|
| localStorage | a small browser store of names and text values | |
| Key | the name a value is saved under | habits |
| Quota | the most data a site may store | |
| State | what the app remembers right now | |
| Serialise | turn data into text so it can be saved | JSON.stringify |
The cells students fill in are left blank in this preview.
localStorage saves a name and a text value
You call setItem with a key and a value. Later you call getItem with the same key to read it back. A key that was never saved gives null, which means nothing there.
Values are always text. To save a list you first turn it into text with JSON.stringify, and you turn it back with JSON.parse.
Saving and reading, line by line
localStorage.setItem("habits", JSON.stringify(list));
const saved = localStorage.getItem("habits");
const list2 = JSON.parse(saved || "[]");
// setItem saves the list as text under the key habits.
// getItem gives that text back, or null if nothing was saved.
// "saved || []" uses an empty list when nothing is there yet.Find where the app uses localStorage
docker exec jupyter grep -o "localStorage\.[a-zA-Z]*" app/app.jsShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
What the command prints
The command searches the app's script for each use of localStorage and prints only the matching part. You see one read, getItem, and one write, setItem.
The app reads its list once when it starts and writes it every time a habit changes. The lab has no browser, so you look at the stored value in your own browser's developer tools, under the storage section.
Worked example: what can go wrong
| Problem | What happens | What to do |
|---|---|---|
| Too much data | The save is refused with an error | Save less, or catch the error |
| Person clears site data | Everything is gone | Offer an export, or a server copy |
| Private window | Data may vanish when it closes | Do not rely on it |
| Two devices | Each has its own copy | Sync through a server |
| Not text | A list saves as a useless word | Use JSON.stringify first |
The cells students fill in are left blank in this preview.
Storage has a limit and can be cleared
Each browser gives a site a limited amount of space, often a few megabytes, and the figure differs. When a save would go over the limit the browser raises an error.
The person can also clear the data, and a browser may clear it when the device is short of space. So localStorage is a convenience for the device, not a safe place for the only copy of something important.
A common mistake
Warning
Many people save a list straight into localStorage and read back the word object instead of the list. Values are always text. Use JSON.stringify to save and JSON.parse to read, and test by reloading the page.