---
title: "Expect browser storage to fail or be · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/client-and-server-state/storage-can-fail
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Expect browser storage to fail or be cleared

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

- ID: APP-60
- Level: Recommended
- Chapter: [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state)
- Rule: Catch the error from every write to browser storage, and treat what is stored there as a copy that can vanish. Keep anything people cannot easily type again on the server too.
- How: `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](https://agentwranglers.se/playbook/app-ui/forms/keep-user-input).
- 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.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### TypeScript example

```ts
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

```python
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 == []
```

## Sources

- [Storage Standard on storage pressure](https://storage.spec.whatwg.org/#storage-pressure)
- [HTML Standard on Storage setItem](https://html.spec.whatwg.org/multipage/webstorage.html#dom-storage-setitem)

## Related rules

- [Never lose what people typed](https://agentwranglers.se/playbook/app-ui/forms/keep-user-input) in App interface

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/app-ui/client-and-server-state/storage-can-fail">Agent Wranglers app interface playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Compute values instead of storing them](https://agentwranglers.se/playbook/app-ui/client-and-server-state/derived-values)
- [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state)