Web Storage and Local Storage

Challenge

Store user preferences, cache data locally, and manage session state without making repeated server requests.

Explanation

Web Storage provides APIs to store data on the client-side. There are two types: localStorage (persistent) and sessionStorage (temporary).

LocalStorage

// Store
localStorage.setItem('theme', 'dark');

// Retrieve
const theme = localStorage.getItem('theme');

// Remove
localStorage.removeItem('theme');

// Clear all
localStorage.clear();

// Check if exists
if (localStorage.getItem('userId')) {
  console.log('User already logged in');
}

// Storage event
window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    console.log('Theme changed:', event.newValue);
  }
});

Complex Objects

// Store objects
const user = { id: 1, name: 'John', preferences: { theme: 'dark' } };
localStorage.setItem('user', JSON.stringify(user));

// Retrieve objects
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.preferences.theme); // 'dark'

SessionStorage

// Same API as localStorage, but data cleared on tab close
sessionStorage.setItem('tempData', 'value');
const tempData = sessionStorage.getItem('tempData');

Practical Example

class UserPreferences {
  constructor() {
    this.storageKey = 'appPreferences';
  }

  get() {
    const data = localStorage.getItem(this.storageKey);
    return data ? JSON.parse(data) : {};
  }

  set(key, value) {
    const prefs = this.get();
    prefs[key] = value;
    localStorage.setItem(this.storageKey, JSON.stringify(prefs));
  }

  clear() {
    localStorage.removeItem(this.storageKey);
  }
}

// Usage
const prefs = new UserPreferences();
prefs.set('theme', 'dark');
prefs.set('language', 'en');
console.log(prefs.get()); // { theme: 'dark', language: 'en' }

Limitations and Best Practices

// Storage quota (typically 5-10MB)
try {
  localStorage.setItem('largeData', largeString);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.error('Storage quota exceeded');
  }
}

// Private browsing clears storage
try {
  const test = '__test__';
  localStorage.setItem(test, test);
  localStorage.removeItem(test);
} catch (e) {
  console.log('Private browsing mode detected');
}

// Don't store sensitive data
// ❌ Bad: localStorage.setItem('password', password);
// ✅ Good: Use sessionStorage for temporary auth tokens