JavaScript localStorage

What is localStorage?

localStorage stores data in the browser. Data persists even after closing the browser.

┌─────────────────────┐
│   Browser            │
│  ┌───────────────┐  │
│  │ localStorage  │  │ ← Stores data here
│  │               │  │
│  │ Key: Value    │  │
│  │ "user": "..." │  │
│  └───────────────┘  │
└─────────────────────┘

Data persists across sessions!

Storing Data

localStorage.setItem('username', 'John');
localStorage.setItem('theme', 'dark');

Retrieving Data

const username = localStorage.getItem('username');
console.log(username); // "John"

Removing Data

localStorage.removeItem('username');
localStorage.clear(); // Remove all

Storing Objects

const user = { name: 'John', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

const stored = JSON.parse(localStorage.getItem('user'));

Key Takeaway

localStorage stores data in browser. Persists across sessions. Use JSON for objects. Great for user preferences and settings.