Storing Data in the Browser

Local Storage allows you to store data in the user's browser that persists even after closing the browser or restarting the computer.

Data is stored as key-value pairs in string format, so you'll need to use JSON.stringify/parse for objects and arrays.

Local Storage is perfect for saving user preferences, form data, shopping carts, and other client-side data up to about 5-10MB.

// Save data to localStorage
localStorage.setItem('username', 'Alice');
localStorage.setItem('theme', 'dark');

// Get data from localStorage
const username = localStorage.getItem('username');
console.log(username); // "Alice"

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

// Clear all localStorage data
localStorage.clear();

// Storing objects (must convert to JSON)
const user = {
  name: 'Bob',
  age: 30,
  preferences: { theme: 'dark', language: 'en' }
};

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

// Retrieve and parse object
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // "Bob"

// Check if key exists
if (localStorage.getItem('username') !== null) {
  console.log('Username exists!');
}

// Get number of items
console.log(localStorage.length);

// Iterate through all items
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(key, value);
}

• setItem(key, value) - Store data with a key
• getItem(key) - Retrieve data by key (returns null if not found)
• removeItem(key) - Delete specific item
• clear() - Remove all localStorage data
• key(index) - Get key name at specific index
• length - Number of items stored
• Storage Limit: Typically 5-10MB per domain
• Persistence: Data persists indefinitely until manually cleared

<div class="storage-demo">
  <h3>Local Storage Examples</h3>

  <div class="example">
    <h4>1. Save & Retrieve Simple Data</h4>
    <input type="text" id="key" placeholder="Key (e.g., username)">
    <input type="text" id="value" placeholder="Value (e.g., John)">
    <button id="saveBtn">Save</button>
    <button id="loadBtn">Load</button>
    <div id="simpleOutput"></div>
  </div>

  <div class="example">
    <h4>2. Save User Preferences</h4>
    <label>
      <input type="checkbox" id="darkMode"> Dark Mode
    </label>
    <label>
      <input type="checkbox" id="notifications"> Notifications
    </label>
    <select id="language">
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="fr">Français</option>
    </select>
    <button id="savePrefsBtn">Save Preferences</button>
    <button id="loadPrefsBtn">Load Preferences</button>
    <div id="prefsOutput"></div>
  </div>

  <div class="example">
    <h4>3. View All Stored Data</h4>
    <button id="viewAllBtn">View All Storage</button>
    <button id="clearAllBtn">Clear All Storage</button>
    <div id="allOutput"></div>
  </div>
</div>