Concepts 🚀 Project 🧮 Labs
📚 Learn / Frontend / localStorage — persist data in the browser

localStorage — persist data in the browser

Save key→value pairs that survive page reloads. 5MB per origin. Strings only — JSON.stringify objects.

Code example

// save
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({id: 1, name: 'Ada'}));

// read
const theme = localStorage.getItem('theme');  // 'dark'
const user = JSON.parse(localStorage.getItem('user') || 'null');

// remove
localStorage.removeItem('theme');
localStorage.clear();  // wipe everything

How it works

localStorage is a per-origin key→value store that survives page reloads and browser restarts. It holds ~5MB per origin and only stores strings — so objects need JSON.stringify on write and JSON.parse on read. Use it for: theme preference, last-visited page, draft form content, offline todo list. Don't use it for: secrets (any JS can read it — XSS = leak), large data (use IndexedDB instead), or anything that needs to sync across devices (it's per-browser). The notebook could use localStorage to persist cell content across reloads so a refresh doesn't lose your work.

🔍 Where this is used in OpenBenchML Could be added to notebook.html to auto-save cell content. Currently underused in OpenBenchML.