Storage & IndexedDB

localStorage.setItem("theme", "dark");
localStorage.getItem("theme");     // "dark"
localStorage.setItem("n", String(42));
Number(localStorage.getItem("n")); // 42: parse it back
 
localStorage.setItem("obj", String({ a: 1 }));
localStorage.getItem("obj");       // "[object Object]"

window.addEventListener("storage", (e: StorageEvent) => {
  if (e.storageArea !== localStorage) return;
  if (e.key === null) {
    // clear() was called
    return;
  }
  if (e.key === "theme" && e.newValue) {
    document.documentElement.dataset.theme = e.newValue;
  }
});

type Prefs = {
  theme: "light" | "dark";
  sidebar: { open: boolean; width: number };
  recent: string[];
};
 
export function readPref<K extends keyof Prefs>(
  key: K,
  fallback: Prefs[K],
): Prefs[K] {
  const raw = localStorage.getItem(key);
  if (raw === null) return fallback;
  try {
    // unchecked cast: see the Zod recipe
    return JSON.parse(raw) as Prefs[K];
  } catch {
    return fallback;
  }
}
 
export function writePref<K extends keyof Prefs>(
  key: K,
  value: Prefs[K],
): void {
  localStorage.setItem(key, JSON.stringify(value));
}
 
writePref("sidebar", { open: true, width: 280 });

export function openDb(): Promise<IDBDatabase> {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open("app", 2);
    req.onupgradeneeded = (e) => {
      const db = req.result;
      // run every step the user has not seen yet
      if (e.oldVersion < 1) {
        const s = db.createObjectStore("notes", {
          keyPath: "id",
        });
        s.createIndex("by-updated", "updatedAt");
      }
      if (e.oldVersion < 2) {
        const notes = req.transaction!.objectStore("notes");
        notes.createIndex("by-tag", "tags", {
          multiEntry: true,
        });
      }
    };
    req.onsuccess = () => {
      const db = req.result;
      // another tab wants a newer version: let it
      db.onversionchange = () => db.close();
      resolve(db);
    };
    req.onerror = () => reject(req.error);
    req.onblocked = () =>
      reject(new Error("Close other tabs to upgrade"));
  });
}

declare const db: IDBDatabase;
 
const tx = db.transaction(["notes"], "readwrite", {
  durability: "relaxed", // faster; Baseline 2024
});
const notes = tx.objectStore("notes");
notes.put({ id: "n1", title: "Hi", updatedAt: Date.now() });
notes.delete("n0");
tx.oncomplete = () => { /* both committed */ };
tx.onerror = () => { /* both rolled back */ };
tx.commit(); // optional: don't wait for auto-commit

declare const db: IDBDatabase;
 
// newest 20 notes, by the "by-updated" index
const idx = db
  .transaction("notes")
  .objectStore("notes")
  .index("by-updated");
const req = idx.openCursor(null, "prev");
const out: unknown[] = [];
req.onsuccess = () => {
  const cursor = req.result;
  if (!cursor || out.length === 20) return;
  out.push(cursor.value);
  cursor.continue(); // fires onsuccess again
};

export function request<T>(req: IDBRequest<T>): Promise<T> {
  return new Promise((resolve, reject) => {
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}
 
export function done(tx: IDBTransaction): Promise<void> {
  return new Promise((resolve, reject) => {
    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
    tx.onabort = () =>
      reject(tx.error ?? new DOMException("Aborted"));
  });
}
 
// usage
declare const db: IDBDatabase;
const tx = db.transaction("notes", "readwrite");
const store = tx.objectStore("notes");
const note = await request(store.get("n1"));
store.put({ ...(note as object), title: "Edited" });
await done(tx);

import { openDB, type DBSchema } from "idb";
 
export type Note = {
  id: string;
  title: string;
  tags: string[];
  updatedAt: number;
};
 
interface AppDB extends DBSchema {
  notes: {
    key: string;
    value: Note;
    indexes: { "by-updated": number; "by-tag": string };
  };
  kv: { key: string; value: unknown };
}
 
export const dbPromise = openDB<AppDB>("app", 2, {
  upgrade(db, oldVersion, _newVersion, tx) {
    if (oldVersion < 1) {
      const notes = db.createObjectStore("notes", {
        keyPath: "id",
      });
      notes.createIndex("by-updated", "updatedAt");
      db.createObjectStore("kv");
    }
    if (oldVersion < 2) {
      tx.objectStore("notes").createIndex("by-tag", "tags", {
        multiEntry: true,
      });
    }
  },
  blocking() {
    void dbPromise.then((db) => db.close());
  },
});

const { usage = 0, quota = 0 } =
  await navigator.storage.estimate();
const pct = quota ? (usage / quota) * 100 : 0;
 
const persisted = await navigator.storage.persisted();

const root = await navigator.storage.getDirectory();
const dir = await root.getDirectoryHandle("exports", {
  create: true,
});
const file = await dir.getFileHandle("report.csv", {
  create: true,
});
const w = await file.createWritable();
await w.write("a,b\n1,2\n");
await w.close(); // committed atomically
 
const text = await (await file.getFile()).text();

import { z } from "zod";
 
export function localStore<T>(
  key: string,
  schema: z.ZodType<T>,
  fallback: T,
) {
  return {
    get(): T {
      try {
        const raw = localStorage.getItem(key);
        if (raw === null) return fallback;
        const r = schema.safeParse(JSON.parse(raw));
        return r.success ? r.data : fallback;
      } catch {
        return fallback; // bad JSON, or storage blocked
      }
    },
    set(value: T): void {
      localStorage.setItem(key, JSON.stringify(value));
    },
    remove: () => localStorage.removeItem(key),
  };
}

import { z } from "zod";
import { localStore } from "./local-store.ts";
 
const Settings = z.object({
  theme: z.enum(["light", "dark"]),
  fontSize: z.number().int().min(10).max(32),
});
const settings = localStore("settings", Settings, {
  theme: "light",
  fontSize: 16,
});
settings.set({ ...settings.get(), theme: "dark" });

type Step = (db: IDBDatabase, tx: IDBTransaction) => void;
 
const steps: Step[] = [
  (db) => db.createObjectStore("todos", { keyPath: "id" }),
  (_db, tx) =>
    tx.objectStore("todos").createIndex("by-due", "due"),
];
 
export function open(name: string): Promise<IDBDatabase> {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(name, steps.length);
    req.onupgradeneeded = (e) => {
      for (let v = e.oldVersion; v < steps.length; v++) {
        steps[v]?.(req.result, req.transaction!);
      }
    };
    req.onsuccess = () => {
      req.result.onversionchange = () => req.result.close();
      resolve(req.result);
    };
    req.onerror = () => reject(req.error);
  });
}

import { dbPromise, type Note } from "./db.ts";
 
export async function saveNote(note: Note) {
  const db = await dbPromise;
  await db.put("notes", { ...note, updatedAt: Date.now() });
}
export const getNote = async (id: string) =>
  (await dbPromise).get("notes", id);
export const notesByTag = async (tag: string) =>
  (await dbPromise).getAllFromIndex("notes", "by-tag", tag);
export const deleteNote = async (id: string) =>
  (await dbPromise).delete("notes", id);
export async function renameAll(from: string, to: string) {
  const db = await dbPromise;
  const tx = db.transaction("notes", "readwrite");
  for (const n of await tx.store.getAll()) {
    if (n.title !== from) continue;
    await tx.store.put({ ...n, title: to });
  }
  await tx.done;
}

import { openDB } from "idb";
 
const kvDb = openDB("kv-store", 1, {
  upgrade: (db) => void db.createObjectStore("kv"),
});
 
export const kv = {
  get: async <T>(key: string): Promise<T | undefined> =>
    (await kvDb).get("kv", key) as Promise<T | undefined>,
  set: async (key: string, value: unknown) => {
    await (await kvDb).put("kv", value, key);
  },
  del: async (key: string) => {
    await (await kvDb).delete("kv", key);
  },
  keys: async () => (await kvDb).getAllKeys("kv"),
};
 
await kv.set("avatar", new Blob(["..."]));
const avatar = await kv.get<Blob>("avatar");

type StorageStatus = {
  persisted: boolean;
  usedMb: number;
  quotaMb: number;
};
export async function ensurePersisted(): Promise<
  StorageStatus
> {
  const s = navigator.storage;
  const persisted =
    (await s.persisted()) || (await s.persist());
  const { usage = 0, quota = 0 } = await s.estimate();
  const mb = (n: number) => Math.round(n / 1024 ** 2);
  return {
    persisted,
    usedMb: mb(usage),
    quotaMb: mb(quota),
  };
}
 
// e.g. after the first saved draft
const status = await ensurePersisted();
if (!status.persisted) {
  // show "export a backup" in settings
}