Web Storage

localStorage, sessionStorage, cookies, and client-side data persistence.

Overview

Web Storage APIs enable client-side data persistence.

Key Concepts

• localStorage — Persistent key-value storage
• sessionStorage — Tab-specific storage
• Cookies — Small data with expiration
• IndexedDB — Client-side database
• Storage Limits — Browser storage quotas

Code Examples

<script>
// localStorage - persists across sessions
localStorage.setItem('theme', 'dark');
localStorage.getItem('theme'); // 'dark'
localStorage.removeItem('theme');
localStorage.clear();

// Store objects
const user = { name: 'John', email: 'john@example.com' };
localStorage.setItem('user', JSON.stringify(user));
const storedUser = JSON.parse(localStorage.getItem('user'));

// sessionStorage - clears when tab closes
sessionStorage.setItem('tempData', 'value');

// Cookies
document.cookie = 'username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';
document.cookie = 'theme=dark; max-age=86400; secure; SameSite=Strict';

// Read cookie
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
  const [key, value] = cookie.trim().split('=');
  acc[key] = value;
  return acc;
}, {});

// IndexedDB for complex data
const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('email', 'email', { unique: true });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  
  store.add({ id: 1, name: 'John', email: 'john@example.com' });
  
  const getRequest = store.get(1);
  getRequest.onsuccess = () => {
    console.log(getRequest.result);
  };
};
</script>

Practice

Build a theme switcher using localStorage and a shopping cart with sessionStorage.