localStorage is the right default for local-only web apps

When building single-file web tools, personal dashboards, or local-first applications that don't need a backend server, the question of where to persist state comes up immediately. Options include: localStorage, sessionStorage, IndexedDB, cookies, Cache API, File System Access API, and even embedding state in the URL hash. Each has different size limits, APIs, and tradeoffs. The wrong choice leads to either over-engineering (setting up IndexedDB for 10KB of data) or hitting walls later (localStorage 5MB limit when storing images). This applies to: personal note-taking apps, bookmark managers, habit trackers, configuration tools, code snippet managers, and any tool where data lives on one device in one browser.

Use localStorage as the default persistence layer for local-only web apps. Here's the complete pattern:

1. STORAGE WRAPPER with error handling:

const storage = {
get(key, fallback = null) {
try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
catch { return fallback; }
},
set(key, value) {
try { localStorage.setItem(key, JSON.stringify(value)); return true; }
catch (e) { console.warn('Storage full or blocked:', e); return false; }
},
remove(key) { localStorage.removeItem(key); }
};

1. STATE HYDRATION on page load:

const state = storage.get('app-state', { entries: [], settings: {} });

1. SAVE on every state change (debounced for performance):

let saveTimeout;
function saveState() {
clearTimeout(saveTimeout);
saveTimeout = setTimeout(() => storage.set('app-state', state), 300);
}

1. IMPORT/EXPORT for portability (critical for single-device limitation):

function exportData() {
const blob = new Blob([JSON.stringify(state, null, 2)], {type: 'application/json'});
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'backup-' + new Date().toISOString().slice(0,10) + '.json';
a.click();
}

1. UPGRADE PATH: When localStorage isn't enough (>5MB), migrate to IndexedDB using idb-keyval library (2KB) for a localStorage-like API.

SIZE REFERENCE: localStorage holds ~5-10MB depending on browser. A JSON object with 10,000 text entries of 500 chars each is about 5MB.

No backend means no deployment costs, no authentication complexity, no CORS configuration, no API versioning, no server downtime, and zero latency for reads/writes. The tradeoff (single device, single browser) is acceptable for personal tools — most people use one primary browser on one primary device for tools. localStorage is synchronous (unlike IndexedDB which is async), has a dead-simple API (getItem/setItem), survives page reloads and browser restarts, and requires zero setup. It's the pragmatic choice that lets you focus on the actual app instead of infrastructure.

Building local-first web apps without a backend