Web Storage API

💾 What is Web Storage?

Web Storage API allows you to store data in the user's browser. It provides two storage mechanisms: localStorage (persistent) and sessionStorage (temporary). Data is stored as key-value pairs.


// Store data in localStorage (persists after browser closes)
localStorage.setItem('username', 'John');
localStorage.setItem('theme', 'dark');

// Store data in sessionStorage (cleared when tab closes)
sessionStorage.setItem('currentPage', 'home');

// Retrieve data
console.log('Username:', localStorage.getItem('username'));

Output:

Username: John

Data stored successfully in browser!

Storage Types

🏠

localStorage

Persistent storage across sessions

localStorage.setItem('key', 'value')

📑

sessionStorage

Temporary storage for current tab

sessionStorage.setItem('key', 'value')

🔍

getItem()

Retrieve stored data

localStorage.getItem('key')

🗑️

removeItem()

Delete specific data

localStorage.removeItem('key')

🔹 Basic Storage Operations

Here are the fundamental operations for web storage:

// STORING DATA
localStorage.setItem('name', 'Alice');
localStorage.setItem('age', '25');
localStorage.setItem('city', 'New York');

// RETRIEVING DATA
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');
console.log(`${name} is ${age} years old`);

// CHECKING IF DATA EXISTS
if (localStorage.getItem('name') !== null) {
    console.log('Name is stored');
} else {
    console.log('Name not found');
}

// REMOVING SPECIFIC ITEM
localStorage.removeItem('age');

// CLEARING ALL DATA
localStorage.clear();

// GET NUMBER OF ITEMS
console.log('Items stored:', localStorage.length);

Storage Demo:

Alice is 25 years old

Name is stored

Items stored: 2

All operations completed successfully!

🔹 Storing Complex Data

Web Storage only stores strings, but you can store objects using JSON:

// Storing an object
const user = {
    name: 'Bob',
    age: 30,
    hobbies: ['reading', 'gaming', 'cooking'],
    preferences: {
        theme: 'dark',
        language: 'en'
    }
};

// Convert object to JSON string
localStorage.setItem('user', JSON.stringify(user));

// Retrieving and parsing object
const storedUser = localStorage.getItem('user');
if (storedUser) {
    const userObject = JSON.parse(storedUser);
    console.log('User name:', userObject.name);
    console.log('Hobbies:', userObject.hobbies.join(', '));
    console.log('Theme:', userObject.preferences.theme);
}

// Storing an array
const todoList = ['Buy groceries', 'Walk the dog', 'Study JavaScript'];
localStorage.setItem('todos', JSON.stringify(todoList));

// Retrieving array
const todos = JSON.parse(localStorage.getItem('todos') || '[]');
console.log('Todo items:', todos.length);

Complex Data Example:

User name: Bob

Hobbies: reading, gaming, cooking

Theme: dark

Todo items: 3

🔹 localStorage vs sessionStorage

Understanding the differences between storage types:

<button onclick="testLocalStorage()">Test localStorage</button>
<button onclick="testSessionStorage()">Test sessionStorage</button>
<button onclick="showStoredData()">Show All Data</button>
<div id="results"></div>

<script>
function testLocalStorage() {
    // Persists even after browser closes
    localStorage.setItem('persistent_data', 'This survives browser restart');
    localStorage.setItem('user_preference', 'dark_theme');
    alert('localStorage data saved!');
}

function testSessionStorage() {
    // Only lasts for current tab session
    sessionStorage.setItem('temp_data', 'This disappears when tab closes');
    sessionStorage.setItem('current_session', new Date().toISOString());
    alert('sessionStorage data saved!');
}

function showStoredData() {
    const results = document.getElementById('results');
    results.innerHTML = `
        <h3>localStorage:</h3>
        <p>Persistent: ${localStorage.getItem('persistent_data') || 'Not found'}</p>
        <p>Preference: ${localStorage.getItem('user_preference') || 'Not found'}</p>
        
        <h3>sessionStorage:</h3>
        <p>Temp: ${sessionStorage.getItem('temp_data') || 'Not found'}</p>
        <p>Session: ${sessionStorage.getItem('current_session') || 'Not found'}</p>
    `;
}
</script>

Storage Comparison:

Feature	localStorage	sessionStorage
Persistence	Until manually cleared	Until tab closes
Scope	All tabs/windows	Current tab only

🔹 Practical Example: User Preferences

A real-world example of storing user preferences:

<div class="settings-panel">
    <h3>User Settings</h3>
    <label>
        Theme: 
        <select id="theme-select" onchange="saveTheme()">
            <option value="light">Light</option>
            <option value="dark">Dark</option>
        </select>
    </label>
    
    <label>
        Font Size: 
        <input type="range" id="font-size" min="12" max="24" onchange="saveFontSize()">
        <span id="font-display">16px</span>
    </label>
    
    <button onclick="resetSettings()">Reset to Default</button>
</div>

<script>
// Load saved preferences on page load
window.addEventListener('load', function() {
    loadUserPreferences();
});

function saveTheme() {
    const theme = document.getElementById('theme-select').value;
    localStorage.setItem('user-theme', theme);
    applyTheme(theme);
}

function saveFontSize() {
    const fontSize = document.getElementById('font-size').value;
    localStorage.setItem('user-font-size', fontSize);
    document.getElementById('font-display').textContent = fontSize + 'px';
    document.body.style.fontSize = fontSize + 'px';
}

function loadUserPreferences() {
    // Load theme
    const savedTheme = localStorage.getItem('user-theme') || 'light';
    document.getElementById('theme-select').value = savedTheme;
    applyTheme(savedTheme);
    
    // Load font size
    const savedFontSize = localStorage.getItem('user-font-size') || '16';
    document.getElementById('font-size').value = savedFontSize;
    document.getElementById('font-display').textContent = savedFontSize + 'px';
    document.body.style.fontSize = savedFontSize + 'px';
}

function applyTheme(theme) {
    document.body.className = theme + '-theme';
}

function resetSettings() {
    localStorage.removeItem('user-theme');
    localStorage.removeItem('user-font-size');
    loadUserPreferences();
    alert('Settings reset to default!');
}
</script>

Settings Panel Demo:

User Settings

Theme:

Font Size: 16px

🔹 Storage Events and Limits

Handle storage events and understand limitations:

// Listen for storage changes (works across tabs)
window.addEventListener('storage', function(e) {
    console.log('Storage changed!');
    console.log('Key:', e.key);
    console.log('Old value:', e.oldValue);
    console.log('New value:', e.newValue);
    console.log('URL:', e.url);
});

// Check storage quota (approximate)
function checkStorageQuota() {
    let total = 0;
    for (let key in localStorage) {
        if (localStorage.hasOwnProperty(key)) {
            total += localStorage[key].length + key.length;
        }
    }
    console.log('Approximate storage used:', total, 'characters');
    
    // Most browsers allow 5-10MB per origin
    const estimatedMB = (total / 1024 / 1024).toFixed(2);
    console.log('Estimated size:', estimatedMB, 'MB');
}

// Safe storage with error handling
function safeSetItem(key, value) {
    try {
        localStorage.setItem(key, value);
        return true;
    } catch (e) {
        if (e.name === 'QuotaExceededError') {
            console.error('Storage quota exceeded!');
            // Handle quota exceeded (maybe clear old data)
        } else {
            console.error('Storage error:', e);
        }
        return false;
    }
}

Storage Management:

✅ Listen for storage changes across tabs

✅ Monitor storage usage

✅ Handle quota exceeded errors

✅ Typical limit: 5-10MB per domain