Web Storage API Practice

Understanding the Problem

We need to implement browser storage functionality for a theme switcher and display name input:

Theme settings must persist across browser sessions (long-term storage)

Display name should only persist within the current session

Both settings should be clearable with a reset button

The interface should update immediately when changes occur

Devising a Plan

1. Implement theme storage using localStorage for persistence across sessions
2. Implement display name storage using sessionStorage for temporary persistence
3. Create functions to store, restore, and clear both types of data
4. Ensure proper error handling when storage is empty or cleared
5. Test functionality across page refreshes and browser sessions

Basic Solution Implementation

// main.js solution

/* Phase 1: Theme Storage Implementation */

// Store theme in localStorage for persistent storage
function storeTheme(themeName) {
    // Store theme name as a string in localStorage
    localStorage.setItem('selectedTheme', themeName);
}

// Restore theme from localStorage if it exists
function restoreTheme() {
    // Get stored theme from localStorage
    const savedTheme = localStorage.getItem('selectedTheme');
    
    // Only set theme if one was previously saved
    if (savedTheme) {
        setTheme(savedTheme);
    }
}

// Clear theme from localStorage
function clearTheme() {
    // Remove theme from localStorage
    localStorage.removeItem('selectedTheme');
}

/* Phase 2: Display Name Implementation */

// Store display name in sessionStorage for current session only
function storeName(displayName) {
    // Store display name in sessionStorage
    sessionStorage.setItem('displayName', displayName);
}

// Restore name from sessionStorage if it exists
function restoreName() {
    // Get stored name from sessionStorage
    const savedName = sessionStorage.getItem('displayName');
    
    // Set input value if name exists
    if (savedName) {
        setInputValue('display-name', savedName);
    }
}

// Clear name from sessionStorage
function clearName() {
    // Remove name from sessionStorage
    sessionStorage.removeItem('displayName');
}
    

Looking Back and Understanding

localStorage vs sessionStorage

Think of localStorage like a permanent notebook where you write down preferences - it stays until you explicitly erase it. sessionStorage is more like a sticky note that gets thrown away when you close the browser tab.

Example Use Cases

localStorage is perfect for:

- User preferences (themes, language settings)

- Saved game progress

- Shopping cart items you want to keep

sessionStorage works better for:

- Temporary form data

- Session-specific user preferences

- One-time tutorial flags

Key Concepts Explained

Setting Items

The setItem() method works like storing items in a key-value dictionary. Think of it as labeling a container (key) and putting something inside it (value).

// Example of storing different types of data
localStorage.setItem('username', 'Alice');        // String
localStorage.setItem('lastLogin', Date.now());    // Number
localStorage.setItem('preferences', JSON.stringify({
    theme: 'dark',
    fontSize: 14
}));                                             // Object (must be stringified)
    

Getting Items

The getItem() method retrieves stored values using their keys. It's like opening a labeled container to see what's inside.

// Example of retrieving stored data
const username = localStorage.getItem('username');     // Returns 'Alice'
const prefs = JSON.parse(localStorage.getItem('preferences')); // Parse stored object
    

Removing Items

The removeItem() method deletes a specific key-value pair. Think of it as recycling a labeled container and its contents.

Common Challenges and Solutions

Storage Limits

Both localStorage and sessionStorage typically have a 5-10MB limit. For larger data, consider:

- Using IndexedDB for larger storage needs

- Implementing data cleanup strategies

- Compressing data before storage

Type Conversion

Web Storage only stores strings. For other data types:

// Storing numbers
localStorage.setItem('count', String(42));
const count = Number(localStorage.getItem('count'));

// Storing objects
localStorage.setItem('user', JSON.stringify({name: 'Alice'}));
const user = JSON.parse(localStorage.getItem('user'));
    

Testing Strategies

To verify your storage implementation:

1. Test theme persistence across page refreshes

2. Verify display name clears when closing the browser tab

3. Ensure Clear All button properly removes both storage types

4. Check behavior when storage is empty or contains invalid data

Advanced Implementations

For more complex applications, consider:

// Example of a more robust storage wrapper
class StorageManager {
    constructor(storage = localStorage) {
        this.storage = storage;
    }

    set(key, value, expires = null) {
        const item = {
            value,
            timestamp: Date.now(),
            expires
        };
        this.storage.setItem(key, JSON.stringify(item));
    }

    get(key) {
        const item = JSON.parse(this.storage.getItem(key));
        if (!item) return null;
        
        if (item.expires && Date.now() > item.timestamp + item.expires) {
            this.storage.removeItem(key);
            return null;
        }
        
        return item.value;
    }

    remove(key) {
        this.storage.removeItem(key);
    }
}
    

Security Considerations

Remember that Web Storage is:

- Not encrypted by default

- Accessible by any JavaScript code on the same origin

- Should not store sensitive data like passwords or tokens

Browser Compatibility

Web Storage is widely supported across modern browsers, but consider:

- Private browsing modes may limit or disable storage

- Mobile browsers may have smaller storage limits

- Some users may have storage disabled for privacy reasons