LocalStorage & SessionStorage

Web Storage API provides two mechanisms for storing data in the browser: localStorage (persistent) and sessionStorage (session-only).

🤔 What is Web Storage?

Web Storage API allows web applications to store data locally in the user's browser. It provides two objects: localStorage and sessionStorage.

localStorage - Data persists across browser sessions
sessionStorage - Data cleared when tab/window closes
Simple API - getItem, setItem, removeItem, clear
Storage Limits - Typically 5-10MB per origin

💡 Key Differences

	localStorage	sessionStorage
Persistence	Forever	Tab session
Scope	All tabs/windows	Single tab
Capacity	5-10MB	5-10MB

When to Use Which?

Use localStorage for user preferences, caching. Use sessionStorage for temporary data, form drafts, sensitive data.

📝 Basic Operations

Basic CRUD operations with localStorage and sessionStorage.

JavaScript Editor

// LocalStorage vs SessionStorage basics
console.log('=== Web Storage API ===');

// Check if storage is available
function isStorageAvailable(type) {
  try {
    const storage = window[type];
    const testKey = '__storage_test__';
    storage.setItem(testKey, testKey);
    storage.removeItem(testKey);
    return true;
  } catch (error) {
    console.error(`${type} is not available:`, error);
    return false;
  }
}

console.log('LocalStorage available:', isStorageAvailable('localStorage'));
console.log('SessionStorage available:', isStorageAvailable('sessionStorage'));

// LocalStorage - persists across browser sessions
localStorage.setItem('username', 'john_doe');
localStorage.setItem('theme', 'dark');
localStorage.setItem('loginCount', '42');

// SessionStorage - cleared when tab/window closes
sessionStorage.setItem('sessionId', 'abc123xyz');
sessionStorage.setItem('tempData', 'temporary value');

// Retrieving data
console.log('\n=== Retrieving Data ===');
console.log('Username:', localStorage.getItem('username'));
console.log('Theme:', localStorage.getItem('theme'));
console.log('Login count:', parseInt(localStorage.getItem('loginCount')));
console.log('Session ID:', sessionStorage.getItem('sessionId'));

// Non-existent keys
console.log('Non-existent:', localStorage.getItem('nonexistent')); // null
console.log('With default:', localStorage.getItem('nonexistent') || 'default');

// Checking if key exists
console.log('\n=== Checking Keys ===');
console.log('Has username?', localStorage.getItem('username') !== null);
console.log('Has username (method)?', 'username' in localStorage); // Not recommended
console.log('Has username (length)?', localStorage.length > 0);

// Removing data
localStorage.removeItem('theme');
console.log('Theme after removal:', localStorage.getItem('theme'));

// Clearing all data
// localStorage.clear(); // Uncomment to clear everything
// sessionStorage.clear();

console.log('\n=== Storage Statistics ===');
console.log('LocalStorage items:', localStorage.length);
console.log('SessionStorage items:', sessionStorage.length);

// List all keys
console.log('\nLocalStorage keys:');
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(`  ${key}: ${localStorage.getItem(key)}`);
}

Core Methods:

setItem(key, value) - Store data
getItem(key) - Retrieve data
removeItem(key) - Remove specific item
clear() - Remove all items
key(index) - Get key name at index
length - Number of items stored

🔢 Data Types & JSON

Web Storage only stores strings. Learn how to store complex data types.

JavaScript Editor

// Storing different data types in Web Storage
console.log('=== Data Types in Web Storage ===');

// Web Storage only stores strings!
// Complex data needs JSON serialization

// String (direct)
localStorage.setItem('stringValue', 'Hello World');

// Number (gets converted to string)
localStorage.setItem('numberValue', 42);
const retrievedNumber = localStorage.getItem('numberValue');
console.log('Number as string:', retrievedNumber, 'Type:', typeof retrievedNumber);
console.log('Converted back:', parseInt(retrievedNumber));

// Boolean
localStorage.setItem('booleanValue', true);
console.log('Boolean as string:', localStorage.getItem('booleanValue'));

// Array (needs JSON)
const colors = ['red', 'green', 'blue'];
localStorage.setItem('colorsArray', JSON.stringify(colors));
const retrievedColors = JSON.parse(localStorage.getItem('colorsArray') || '[]');
console.log('Array:', retrievedColors, 'Type:', Array.isArray(retrievedColors));

// Object (needs JSON)
const user = {
  name: 'Alice',
  age: 30,
  isAdmin: true,
  preferences: {
    theme: 'dark',
    notifications: true
  }
};
localStorage.setItem('userObject', JSON.stringify(user));
const retrievedUser = JSON.parse(localStorage.getItem('userObject') || '{}');
console.log('Object:', retrievedUser);
console.log('Name:', retrievedUser.name);

// Date (needs conversion)
const now = new Date();
localStorage.setItem('currentDate', now.toISOString());
const retrievedDate = new Date(localStorage.getItem('currentDate') || '');
console.log('Date:', retrievedDate.toLocaleString());

// Function (cannot be stored directly)
function greet() { return 'Hello!'; }
// localStorage.setItem('function', greet); // Will store "function greet() { return 'Hello!'; }"

// Map and Set (needs conversion)
const userMap = new Map([
  ['name', 'Bob'],
  ['age', 25]
]);
localStorage.setItem('userMap', JSON.stringify(Array.from(userMap.entries())));
const mapData = JSON.parse(localStorage.getItem('userMap') || '[]');
const restoredMap = new Map(mapData);
console.log('Map name:', restoredMap.get('name'));

// Special values
localStorage.setItem('nullValue', null);
localStorage.setItem('undefinedValue', undefined);
localStorage.setItem('emptyString', '');

console.log('\n=== Special Values ===');
console.log('null:', localStorage.getItem('nullValue')); // "null" as string
console.log('undefined:', localStorage.getItem('undefinedValue')); // "undefined" as string
console.log('empty string:', "'" + localStorage.getItem('emptyString') + "'");

// Safe storage utility
const StorageUtil = {
  set(key, value) {
    try {
      const serialized = JSON.stringify(value);
      localStorage.setItem(key, serialized);
      return true;
    } catch (error) {
      console.error('Storage error:', error);
      return false;
    }
  },
  
  get(key, defaultValue = null) {
    try {
      const item = localStorage.getItem(key);
      return item !== null ? JSON.parse(item) : defaultValue;
    } catch (error) {
      console.error('Retrieval error:', error);
      return defaultValue;
    }
  },
  
  remove(key) {
    localStorage.removeItem(key);
  },
  
  clear() {
    localStorage.clear();
  }
};

// Using the utility
StorageUtil.set('safeUser', { name: 'Safe User', data: [1, 2, 3] });
console.log('\nSafe retrieval:', StorageUtil.get('safeUser'));
console.log('Non-existent with default:', StorageUtil.get('nonexistent', 'default'));

What Can Be Stored:

Strings (directly)
Numbers (as strings)
Booleans (as strings)
Arrays/Objects (with JSON)

What Cannot Be Stored:

Functions (lose functionality)
DOM elements
Circular references
Native objects (Map, Set, Date need conversion)

📊 Storage Limits & Quota

Understanding storage limits and handling quota exceeded errors.

JavaScript Editor

// Storage quota and limits
console.log('=== Storage Limits ===');

// Function to check available space
function getRemainingStorage() {
  const testKey = 'test';
  let total = '';
  
  try {
    // Try to use up all storage
    while (true) {
      total += '0123456789'; // 10 bytes
      localStorage.setItem(testKey, total);
    }
  } catch (error) {
    const used = (total.length * 2) / 1024 / 1024; // MB (2 bytes per char)
    localStorage.removeItem(testKey);
    
    // Different browsers have different limits (usually 5-10MB)
    return {
      used: used.toFixed(2),
      message: `Used approximately ${used.toFixed(2)}MB before hitting limit`
    };
  }
}

// Check current usage
function checkCurrentUsage() {
  let totalBytes = 0;
  
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    totalBytes += key.length + value.length;
  }
  
  const kb = (totalBytes * 2) / 1024; // 2 bytes per character
  const mb = kb / 1024;
  
  return {
    items: localStorage.length,
    bytes: totalBytes * 2,
    kb: kb.toFixed(2),
    mb: mb.toFixed(4),
    percent: (mb / 5 * 100).toFixed(1) // Assuming 5MB limit
  };
}

console.log('Current usage:', checkCurrentUsage());

// Handle quota exceeded errors
function safeStorageOperation(key, value) {
  try {
    localStorage.setItem(key, value);
    return { success: true, message: 'Storage successful' };
  } catch (error) {
    if (error.name === 'QuotaExceededError' || 
        error.name === 'NS_ERROR_DOM_QUOTA_REACHED' ||
        error.message.includes('quota')) {
      
      console.warn('Storage quota exceeded!');
      
      // Strategy 1: Remove old items
      const keysToRemove = [];
      for (let i = 0; i < localStorage.length; i++) {
        const storageKey = localStorage.key(i);
        if (storageKey.startsWith('temp_') || storageKey.startsWith('cache_')) {
          keysToRemove.push(storageKey);
        }
      }
      
      keysToRemove.forEach(k => localStorage.removeItem(k));
      console.log(`Removed ${keysToRemove.length} temporary items`);
      
      // Try again
      try {
        localStorage.setItem(key, value);
        return { 
          success: true, 
          message: 'Storage successful after cleanup' 
        };
      } catch (retryError) {
        return { 
          success: false, 
          message: 'Still out of space after cleanup',
          error: retryError.message 
        };
      }
    } else {
      return { 
        success: false, 
        message: 'Other storage error',
        error: error.message 
      };
    }
  }
}

// Test with large data
console.log('\n=== Testing Storage ===');
const largeData = 'x'.repeat(1024 * 1024); // ~1MB
const result = safeStorageOperation('largeItem', largeData);
console.log('Storage result:', result);

// Storage event listener
window.addEventListener('storage', (event) => {
  console.log('\n=== Storage Event ===');
  console.log('Key changed:', event.key);
  console.log('Old value:', event.oldValue);
  console.log('New value:', event.newValue);
  console.log('URL:', event.url);
  console.log('Storage area:', event.storageArea === localStorage ? 'localStorage' : 'sessionStorage');
});

// Simulate storage event from another tab
setTimeout(() => {
  // In real scenario, this would be triggered from another tab
  console.log('\n(Simulating storage event from another tab)');
  const event = new StorageEvent('storage', {
    key: 'username',
    oldValue: null,
    newValue: 'new_user',
    url: window.location.href,
    storageArea: localStorage
  });
  window.dispatchEvent(event);
}, 1000);

Storage Limits by Browser:

Chrome: 10MB per origin
Firefox: 10MB per origin
Safari: 5MB per origin
Edge: 10MB per origin
Mobile browsers: Usually 5MB

🛒 Practical Example: Shopping Cart

Complete shopping cart implementation with localStorage and sessionStorage.

JavaScript Editor

// Practical Example: Shopping Cart with LocalStorage
class ShoppingCart {
  constructor() {
    this.cartKey = 'shopping_cart';
    this.cart = this.loadCart();
    this.init();
  }
  
  init() {
    // Listen for storage events (updates from other tabs)
    window.addEventListener('storage', (event) => {
      if (event.key === this.cartKey) {
        console.log('Cart updated from another tab!');
        this.cart = this.loadCart();
        this.updateCartDisplay();
      }
    });
    
    // Auto-save on page unload
    window.addEventListener('beforeunload', () => {
      this.saveCart();
    });
    
    // Periodic backup (every 30 seconds)
    setInterval(() => this.createBackup(), 30000);
  }
  
  loadCart() {
    try {
      const saved = localStorage.getItem(this.cartKey);
      return saved ? JSON.parse(saved) : {
        items: [],
        lastUpdated: new Date().toISOString(),
        version: '1.0'
      };
    } catch (error) {
      console.error('Error loading cart:', error);
      return { items: [], lastUpdated: new Date().toISOString() };
    }
  }
  
  saveCart() {
    try {
      this.cart.lastUpdated = new Date().toISOString();
      localStorage.setItem(this.cartKey, JSON.stringify(this.cart));
      return true;
    } catch (error) {
      console.error('Error saving cart:', error);
      return false;
    }
  }
  
  createBackup() {
    try {
      const backupKey = `${this.cartKey}_backup_${Date.now()}`;
      localStorage.setItem(backupKey, JSON.stringify(this.cart));
      
      // Keep only last 5 backups
      const backupKeys = [];
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith(`${this.cartKey}_backup_`)) {
          backupKeys.push(key);
        }
      }
      
      if (backupKeys.length > 5) {
        backupKeys.sort().slice(0, -5).forEach(key => {
          localStorage.removeItem(key);
        });
      }
    } catch (error) {
      console.error('Backup failed:', error);
    }
  }
  
  addItem(productId, productName, price, quantity = 1) {
    const existingItem = this.cart.items.find(item => item.productId === productId);
    
    if (existingItem) {
      existingItem.quantity += quantity;
    } else {
      this.cart.items.push({
        productId,
        productName,
        price,
        quantity,
        addedAt: new Date().toISOString()
      });
    }
    
    this.saveCart();
    this.updateCartDisplay();
    return this.cart;
  }
  
  removeItem(productId) {
    this.cart.items = this.cart.items.filter(item => item.productId !== productId);
    this.saveCart();
    this.updateCartDisplay();
    return this.cart;
  }
  
  updateQuantity(productId, quantity) {
    const item = this.cart.items.find(item => item.productId === productId);
    if (item) {
      if (quantity <= 0) {
        this.removeItem(productId);
      } else {
        item.quantity = quantity;
      }
      this.saveCart();
      this.updateCartDisplay();
    }
    return this.cart;
  }
  
  clearCart() {
    this.cart.items = [];
    this.saveCart();
    this.updateCartDisplay();
    return this.cart;
  }
  
  getCartSummary() {
    const totalItems = this.cart.items.reduce((sum, item) => sum + item.quantity, 0);
    const totalPrice = this.cart.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    
    return {
      totalItems,
      totalPrice: totalPrice.toFixed(2),
      itemCount: this.cart.items.length,
      lastUpdated: new Date(this.cart.lastUpdated).toLocaleString()
    };
  }
  
  updateCartDisplay() {
    // In a real app, this would update the UI
    console.log('\n=== Cart Updated ===');
    console.log('Items:', this.cart.items.length);
    console.log('Summary:', this.getCartSummary());
    console.log('Cart contents:', JSON.stringify(this.cart.items, null, 2));
  }
  
  // Export cart data
  exportCart() {
    return {
      data: this.cart,
      json: JSON.stringify(this.cart, null, 2),
      summary: this.getCartSummary()
    };
  }
  
  // Import cart data
  importCart(cartData) {
    try {
      const data = typeof cartData === 'string' ? JSON.parse(cartData) : cartData;
      this.cart = { ...this.cart, ...data };
      this.saveCart();
      this.updateCartDisplay();
      return true;
    } catch (error) {
      console.error('Import failed:', error);
      return false;
    }
  }
}

// Usage example
console.log('=== Shopping Cart Demo ===');
const cart = new ShoppingCart();

// Add some items
cart.addItem('P001', 'JavaScript Book', 29.99, 2);
cart.addItem('P002', 'Web Development Course', 99.99, 1);
cart.addItem('P003', 'Programming T-Shirt', 19.99, 3);

console.log('Initial cart summary:', cart.getCartSummary());

// Update quantity
cart.updateQuantity('P001', 1);
console.log('\nAfter updating quantity:', cart.getCartSummary());

// Remove item
cart.removeItem('P003');
console.log('\nAfter removing item:', cart.getCartSummary());

// Export/Import demonstration
const exported = cart.exportCart();
console.log('\nExported cart JSON (first 200 chars):', exported.json.substring(0, 200) + '...');

// Simulate restoring from backup
const backupCart = {
  items: [
    { productId: 'P004', productName: 'Backup Item', price: 49.99, quantity: 1 }
  ],
  lastUpdated: new Date().toISOString()
};

cart.importCart(backupCart);
console.log('\nAfter import:', cart.getCartSummary());

// SessionStorage example: User session
class UserSession {
  constructor() {
    this.sessionKey = 'user_session';
    this.session = this.loadSession();
  }
  
  loadSession() {
    const session = sessionStorage.getItem(this.sessionKey);
    return session ? JSON.parse(session) : {
      sessionId: this.generateSessionId(),
      startTime: new Date().toISOString(),
      pageViews: 0,
      actions: []
    };
  }
  
  saveSession() {
    sessionStorage.setItem(this.sessionKey, JSON.stringify(this.session));
  }
  
  generateSessionId() {
    return 'session_' + Math.random().toString(36).substr(2, 9);
  }
  
  trackPageView(page) {
    this.session.pageViews++;
    this.session.actions.push({
      type: 'page_view',
      page,
      timestamp: new Date().toISOString()
    });
    this.saveSession();
  }
  
  trackAction(action, data = {}) {
    this.session.actions.push({
      type: action,
      data,
      timestamp: new Date().toISOString()
    });
    
    // Keep only last 50 actions
    if (this.session.actions.length > 50) {
      this.session.actions = this.session.actions.slice(-50);
    }
    
    this.saveSession();
  }
  
  getSessionInfo() {
    const duration = new Date() - new Date(this.session.startTime);
    return {
      sessionId: this.session.sessionId,
      duration: Math.floor(duration / 1000) + ' seconds',
      pageViews: this.session.pageViews,
      actionCount: this.session.actions.length
    };
  }
}

console.log('\n=== Session Tracking Demo ===');
const userSession = new UserSession();
userSession.trackPageView('/products');
userSession.trackAction('add_to_cart', { productId: 'P001' });
userSession.trackPageView('/cart');

console.log('Session info:', userSession.getSessionInfo());

💡 Best Practices:

Always use try-catch for storage operations
Implement proper error handling for quota exceeded
Use JSON for complex data
Clear old/unused data periodically
Don't store sensitive information
Consider IndexedDB for larger data needs

Next Steps

Now that you can store data in the browser, learn about JavaScript Modules for better code organization.

← JSON Modules →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

LocalStorage & SessionStorage

🤔 What is Web Storage?

💡 Key Differences

When to Use Which?

📝 Basic Operations

Core Methods:

🔢 Data Types & JSON

What Can Be Stored:

What Cannot Be Stored:

📊 Storage Limits & Quota

Storage Limits by Browser:

🛒 Practical Example: Shopping Cart

💡 Best Practices:

Next Steps

Follow Us

Our Tools

Our Company

Special Tools