Core Concepts

To make the most of ContinueJS, it helps to understand its three main pillars: Drafts, Storage Engines, and Lifecycle Events.

---

1. Draft-Centric Design

Unlike traditional auto-save solutions that couple state to a specific server API endpoint or form tag, ContinueJS treats state as a Draft.

A Draft is an isolated unit of temporary state identified by a unique string ID:

import { createDraft } from '@continuejs/core';

const draft = createDraft({
  id: 'user-settings-draft',
  retention: '30d',
  storage: 'indexeddb',
});

You can set values programmatically on a draft:

draft.set('theme', 'dark');
draft.set('notifications', true);
await draft.save();

Or you can attach a draft directly to a DOM <form> element, which automatically reads and updates fields whenever the user types.

---

2. Storage Engines & Fallbacks

ContinueJS comes with three built-in storage engines:

Engine	Storage Location	Lifetime	Capacity	Ideal For
IndexedDBBackend	IndexedDB	Persistent (until cleared or expired)	~50MB+	Primary draft storage
SessionStorageBackend	SessionStorage	Closed when tab is closed	~5MB	Ephemeral multi-step wizards
MemoryBackend	RAM	Cleared on page refresh	Unlimited	Unit testing & headless scripts

Automatic Fallback Behavior

When you request storage: 'indexeddb', ContinueJS verifies browser support. If IndexedDB is disabled (for example, in strict private browsing modes or locked-down embedded webviews), StoreManager automatically routes to SessionStorageBackend or MemoryBackend without crashing your web app.

---

3. Lifecycle Events

Every Draft instance is an event emitter. You can listen for changes, saves, restorations, and expirations:

// Listen for background auto-saves
draft.on('save', (payload) => {
  console.log(`Saved ${payload.id} at ${new Date(payload.savedAt).toLocaleTimeString()}`);
});

// Listen for restoration
draft.on('restore', (payload) => {
  console.log('Restored state:', payload.data);
});

// Listen for expiration cleanup
draft.on('expire', () => {
  console.log('Draft expired and was automatically deleted');
});

---

4. Auto-Retention & Cleanup Policies

You don't want old drafts clogging up browser storage forever. ContinueJS lets you specify a retention window:

const draft = createDraft({
  id: 'checkout-wizard',
  retention: '1d', // Options: '1h', '1d', '7d', '30d', 'forever'
});

When hasDraft() or restore() is called, ContinueJS evaluates the timestamp. If the draft is older than the retention window, it is automatically purged from storage and an expire event is emitted.