Remembering Things with localStorage

Here's a problem. Build a page that lets the user choose dark mode. Now refresh the page. Their choice is gone! Every variable is wiped clean each time the page loads (remember the Professor's Corner in Grade 1?).

To remember things between visits, browsers give you localStorage: a little storage box for each website that survives refreshes, closing the tab, and even restarting the computer.

It's very simple to use:

// save something
localStorage.setItem("username", "Lucas");

// read it back (even after a refresh!)
const name = localStorage.getItem("username");
console.log(name); // "Lucas"

// remove one item
localStorage.removeItem("username");

// read something that was never saved
console.log(localStorage.getItem("nothingHere")); // null

There's one catch: localStorage can only store strings. If you want to save an array or an object, you have to convert it to a string first with JSON.stringify, and turn it back with JSON.parse when you load it. (That's what JSON is for! Grade 8 is paying off again.)

const favorites = ["burger", "pancakes", "coffee"];

// saving: object/array → string
localStorage.setItem("favorites", JSON.stringify(favorites));

// loading: string → object/array
const saved = JSON.parse(localStorage.getItem("favorites"));
console.log(saved[1]); // "pancakes"

A common pattern is to load saved data with a fallback, for the very first visit when nothing has been saved yet:

const saved = localStorage.getItem("favorites");
const favorites = saved ? JSON.parse(saved) : [];