14. Local Storage and Saving Data in JavaScript

So far, everything in our JavaScript apps disappears when the page reloads. But what if you want your app to *remember* — like keeping a theme preference or saving a user’s name?

What Is Web Storage?

The **Web Storage API** provides two key-value storage systems built right into the browser: - **localStorage** → Data that stays even after the browser is closed. - **sessionStorage** → Data that lasts only while the tab is open.

Storing Data

localStorage.setItem('username', 'Ada');
sessionStorage.setItem('theme', 'dark');

Both storage types use `setItem(key, value)` to save data as **strings**. Even if you pass numbers or objects, they’ll be converted to strings automatically.

Retrieving Data

const name = localStorage.getItem('username');
console.log(name); // Ada

Use `getItem(key)` to read data. If the key doesn’t exist, it returns `null`.

Removing Data

localStorage.removeItem('username');

// or clear everything at once:
localStorage.clear();

Storing Complex Data (Objects & Arrays)

Since localStorage only supports strings, you’ll need to convert objects to JSON strings before saving them — and parse them back when retrieving.

const user = { name: 'Ada', age: 25, country: 'Nigeria' };

// Save
localStorage.setItem('user', JSON.stringify(user));

// Retrieve
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // Ada

Practical Example: Theme Toggle

const themeToggle = document.getElementById('toggle');

// Load stored theme
const savedTheme = localStorage.getItem('theme') || 'light';
document.body.className = savedTheme;

themeToggle.addEventListener('click', () => {
  const newTheme = document.body.className === 'light' ? 'dark' : 'light';
  document.body.className = newTheme;
  localStorage.setItem('theme', newTheme);
});

Now your theme preference stays even if you refresh or reopen the site — no backend required!

Security Note

Mini Challenge

Build a simple to-do list where each task is saved in localStorage so that your list persists even after reloading the page.

MDN Docs: Web Storage API