Local Storage

Learning objectives#

• Save and read values with setItem and getItem
• Store objects as JSON
• Remove items
• Know localStorage’s limits and safe uses

Explanation#

localStorage stores string key–value pairs per website (origin), about 5 MB, with no expiry.

setItem(key, value) saves, getItem(key) reads (null if missing), removeItem(key) deletes, clear() deletes everything.

Only strings are stored, so use JSON.stringify and JSON.parse for objects and arrays.

Anything in localStorage can be read by any script on the page, so never store passwords or tokens there.

Code example: A theme that remembers itself#

1<button id="toggle">Toggle theme</button>
2<script>
3  const saved = localStorage.getItem('theme') ?? 'light';
4  document.body.dataset.theme = saved;
5

6  document.querySelector('#toggle').addEventListener('click', () => {
7    const next = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
8    document.body.dataset.theme = next;
9    localStorage.setItem('theme', next);
10  });
11

12  // Objects must be stored as JSON
13  const prefs = { fontSize: 18, lang: 'en' };
14  localStorage.setItem('prefs', JSON.stringify(prefs));
15  const loaded = JSON.parse(localStorage.getItem('prefs'));
16  console.log(loaded.fontSize);   // 18
17</script>

The chosen theme is still applied after a page reload, and 18 is logged. (This example uses real storage, so run it in the playground or your own page — runnable lesson examples are sandboxed without storage.)

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. getItem returns the saved theme or null; ?? falls back to "light".
2. Clicking the button flips the theme and saves it.
3. On the next visit, the saved value is read and applied immediately.
4. Objects are saved as JSON text and parsed back.

Real-world use case#

Common mistakes#

Best practices#

• Wrap storage access in try…catch (it can be blocked in private mode)
• Store small, non-sensitive data only
• Version your keys (prefs-v1) so you can change the format later
• Validate data read back from storage

Remember this#

Practice exercise#

1const visits = Number(localStorage.getItem('visits') ?? 0) + 1;
2localStorage.setItem('visits', visits);
3document.body.prepend(`Visit #${visits}`);

Mini quiz#

Want more? Practise all JavaScript MCQs · JavaScript interview questions

Related topics#

My notes#

Saved in this browser.