← Back to Engine

Client-Side Storage Options

Browsers provide several distinct client-side storage mechanisms tailored for different persistence requirements and data scales.

Storage Mechanism Matrix

localStorage: 5-10MB, persistent across sessions, synchronous key-value strings.
sessionStorage: 5MB, destroyed when tab/window closes, synchronous key-value strings.
Cookies: 4KB, sent with every HTTP request header. Use HttpOnly and SameSite flags to mitigate XSS/CSRF!
IndexedDB: 100MB+, asynchronous NoSQL object database supporting indexes and transactions.

XSS Security Risk Warning

Never store sensitive JWT tokens or secrets in localStorage! Any XSS vulnerability allows malicious scripts to read localStorage directly via window.localStorage.

The Challenge: TTL Storage Wrapper

Implement a SafeStorage object wrapping localStorage with automated Time-To-Live (TTL) expiration:

setItem(key, value, ttlMs): Stores JSON payload containing value and an expiryTimestamp.
getItem(key): Reads payload. If Date.now() > expiryTimestamp, removes key and returns null. Otherwise returns value.

INTERACTIVE SANDBOX

Implement SafeStorage and hit RUN.

/**
 * Implement SafeStorage with TTL expiration
 */
var SafeStorage = {
    _memory: {},
    _getStore: function() {
        try {
            return typeof localStorage !== 'undefined' ? localStorage : null;
        } catch (e) {
            return null;
        }
    },
    setItem: function(key, value, ttlMs) {
        const item = {
            val: value,
            expiry: Date.now() + ttlMs
        };
        const str = JSON.stringify(item);
        const store = this._getStore();
        try {
            if (store) store.setItem(key, str);
            else this._memory[key] = str;
        } catch (e) {
            this._memory[key] = str;
        }
    },
    getItem: function(key) {
        const store = this._getStore();
        let raw = null;
        try {
            raw = store ? store.getItem(key) : this._memory[key];
        } catch (e) {
            raw = this._memory[key];
        }
        if (!raw) return null;
        try {
            const item = JSON.parse(raw);
            if (Date.now() > item.expiry) {
                try {
                    if (store) store.removeItem(key);
                } catch (e) {}
                delete this._memory[key];
                return null;
            }
            return item.val;
        } catch (e) {
            return null;
        }
    }
};

// Test setup
SafeStorage.setItem("user_session", "active_token_99", 2000); // 2s TTL
console.log("Immediate fetch:", SafeStorage.getItem("user_session"));

SafeStorage.setItem("expired_session", "old_token", -100); // Already expired
console.log("Expired fetch:", SafeStorage.getItem("expired_session"));

TERMINAL OUTPUT