Bits of .NET

💾 localStorage = Data Persistence

Data needs to persist. localStorage provides client-side data persistence for web applications.

📝 localStorage API

// Basic Operations
localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

// Storing Objects
const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
const stored = JSON.parse(localStorage.getItem('user'));

// Storing Arrays
const items = ['item1', 'item2', 'item3'];
localStorage.setItem('items', JSON.stringify(items));
const itemsArray = JSON.parse(localStorage.getItem('items'));

// Storage Event Listener
window.addEventListener('storage', (e) => {
    console.log('Storage changed:', e.key, e.oldValue, e.newValue);
});

// Check if Key Exists
if (localStorage.getItem('key') !== null) {
    // Key exists
}

// Storage Capacity
console.log('Storage available:', navigator.storage.estimate());

🎯 Advanced Patterns

// Settings Manager
class SettingsManager {
    constructor() {
        this.defaults = {
            theme: 'light',
            language: 'en',
            notifications: true
        };
    }

    get(key) {
        const value = localStorage.getItem(key);
        return value !== null ? JSON.parse(value) : this.defaults[key];
    }

    set(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
        this.notify(key, value);
    }

    notify(key, value) {
        document.dispatchEvent(new CustomEvent('settings-changed', {
            detail: { key, value }
        }));
    }
}

// Cache Manager
class CacheManager {
    constructor(prefix = 'cache_') {
        this.prefix = prefix;
        this.ttl = 3600000; // 1 hour
    }

    set(key, data) {
        const item = {
            data: data,
            timestamp: Date.now()
        };
        localStorage.setItem(this.prefix + key, JSON.stringify(item));
    }

    get(key) {
        const raw = localStorage.getItem(this.prefix + key);
        if (!raw) return null;

        const item = JSON.parse(raw);
        if (Date.now() - item.timestamp > this.ttl) {
            localStorage.removeItem(this.prefix + key);
            return null;
        }

        return item.data;
    }
}

// State Persistence
const state = {
    counter: 0,
    items: []
};

function saveState() {
    localStorage.setItem('appState', JSON.stringify(state));
}

function loadState() {
    const saved = localStorage.getItem('appState');
    if (saved) {
        Object.assign(state, JSON.parse(saved));
    }
}

// Auto-save
setInterval(saveState, 5000);
window.addEventListener('beforeunload', saveState);

💡 localStorage Tips

• Store only serializable data
• Handle storage errors gracefully
• Use namespacing for keys
• Implement expiration for cached data
• Don’t store sensitive information