localStorage lets your page remember things between visits.
Direct answer
localStorage saves key-value pairs as text in the browser. Use setItem, getItem and removeItem. Store objects by converting them to JSON. Data stays until it is cleared, but it is not secure and should not hold sensitive information.
Basic use
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme"); // "dark"
localStorage.removeItem("theme");
localStorage.clear();
Storing objects
const todos = [{ text: "Learn JS", done: false }];
localStorage.setItem("todos", JSON.stringify(todos));
const saved = JSON.parse(localStorage.getItem("todos")) || [];
localStorage vs sessionStorage
localStorage | sessionStorage | |
|---|---|---|
| Lasts | until cleared | until the tab closes |
Limits and cautions
- Only strings are stored.
- Storage space is small, roughly a few megabytes.
- Never store passwords or private data.
- Wrap calls in
try/catch, since storage can be blocked.
Where Teyro fits
Teyro's Interactive Web Pages with JavaScript course turns this into short lessons you can play in a few minutes a day. It has 37 lessons, and you can start free.
The bottom line
Great for preferences and small app state. See web storage.
