Expect browser storage to fail or be cleared

How to do it

localStorage.setItem throws when storage is full or blocked, and IndexedDB writes can fail the same way. Wrap each write and keep the value in memory when it fails. Then tell the person their draft is not saved on this device. Browsers clear storage in best-effort mode when the device runs low on space. For drafts and offline data, ask for persistent storage with navigator.storage.persist(), and read navigator.storage.estimate() before writes over 1 MB. Validate what you read back and fall back to defaults. Drafts follow never lose what people typed.

Examples

TypeScript example

export function storeDraft(key: string, draft: unknown): boolean {
  try {
    localStorage.setItem(key, JSON.stringify(draft));
    return true;
  } catch {
    showStatus('This draft is not saved on this device.');
    return false;
  }
}

export async function keepOfflineData() {
  if (navigator.storage?.persist && !(await navigator.storage.persisted())) await navigator.storage.persist();
}

Python example

def test_draft_survives_failing_storage(page):
    page.add_init_script("Storage.prototype.setItem = () => { throw new DOMException('full', 'QuotaExceededError') }")
    errors = []
    page.on("pageerror", errors.append)
    page.goto("https://app.example.com/invoices/new")
    page.get_by_label("Customer").fill("Northwind Traders")
    expect(page.get_by_role("status")).to_contain_text("not saved on this device")
    expect(page.get_by_label("Customer")).to_have_value("Northwind Traders")
    assert errors == []

How to check

A browser test makes every storage write throw and fills a draft form. The page logs 0 uncaught errors, a message says the draft is not saved on this device, and the fields keep their values. A second test clears site storage and reloads, and the screen loads with 0 console errors.

Sources

• Storage Standard on storage pressure
• HTML Standard on Storage setItem

Related rules

• Never lose what people typed in App interface