Lesson 24 · JavaScript in the browser

Storage in the browser

A page's variables vanish when it reloads, but localStorage keeps small pieces of text in the browser, one store per website. Follow a page that counts your visits: getItem finds nothing the first time, setItem stores the string "1", a reload empties memory but not storage, and the second visit reads "1" back, turns it into a number and stores "2".

10 min11 steps5 questionsIntermediate

Fig 24 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01A page sets let score = 10, then you reload the page. What happens to score?

A reload throws away the old page and its memory. Only what you saved in storage, for example with localStorage.setItem, is still there.

02Nothing has been saved under the key "theme". What does localStorage.getItem("theme") return?

getItem returns null when the key does not exist. That is why the example uses Number(saved): Number(null) is 0.

03You run localStorage.setItem("visits", 1), then const v = localStorage.getItem("visits"). What is v + 1?

Storage keeps only strings, so v is "1". Adding 1 to a string joins the text and gives "11". Use Number(v) + 1 to get 2.

04How should you store an object such as { name: "Ali", age: 30 }?

setItem turns its value into a string; a plain object would become "[object Object]". JSON.stringify makes JSON text, and JSON.parse builds the object again.

05What is the difference between localStorage and sessionStorage?

Both have getItem and setItem and both are per origin. localStorage is kept until it is cleared; sessionStorage lasts only as long as the tab.

Key terms

Glossary

Web storage: A browser feature that lets a page keep small pieces of text, as key-value pairs, in the browser itself. It has two stores: localStorage and sessionStorage.
localStorage: The web store that is kept after reloads and browser restarts, until it is cleared. One store per origin.
sessionStorage: Works like localStorage, but its data is cleared when the tab (the page session) ends.
Key-value pair: A name (the key, such as "visits") and the value saved under it (such as "1"). In web storage both are strings.
Origin: The scheme, host and port of a URL together, such as http://localhost:8000. Each origin has its own storage that other sites cannot read.
null: A JavaScript value meaning "no value". getItem returns it when the key does not exist.
Number(): Turns a value into a number: Number("1") is 1 and Number(null) is 0.
JSON: A text format for data. JSON.stringify turns an object into text you can store; JSON.parse turns the text back into an object.

Fine print

Notes and sources

The Web Storage API keeps every key and value as a string. setItem converts what you pass to a string, so the number 1 is stored as "1", and an object would be stored as the useless text "[object Object]" unless you JSON.stringify it first.
An origin is the scheme, host and port of the page's URL together. http://localhost:8000 and http://localhost:3000 are different origins, so they have separate stores. Pages opened straight from a file (file://) behave differently in each browser; serve the files from a local web server, for example python3 -m http.server 8000.
Web storage is small: browsers allow about 5 MiB of localStorage per origin. It is also synchronous, so every getItem and setItem waits for the browser. Use it for small settings, not large data.
sessionStorage has the same methods (getItem, setItem, removeItem, clear). Its data lasts as long as the tab: a reload keeps it, closing the tab clears it. In a private window, localStorage is cleared when the last private tab closes.
The memory boxes are a simplification: saved and visits are bindings in the script's scope. When the page is reloaded, a fresh script runs with fresh bindings; nothing from the old page's memory survives.

Quiz Unlocks after the last step.