Connectivity State Patterns

Local Draft Saved

A draft saved indicator shows a pinned 09:42 timestamp and says the static lesson does not write localStorage or IndexedDB.

Program

Draft save indicators help people understand whether their work is safe. This example uses a fixed timestamp and no browser storage.

local_draft_saved.html
Visuals: captured from real browser rendering
<section class="draft-save" data-draft-state="saved">
  <label for="draft-body">Draft message</label>
  <textarea id="draft-body" readonly>Bring receipts to the review.</textarea>
  <p role="status">Draft saved at <time datetime="2026-07-07T09:42">09:42</time>.</p>
  <p class="note">This static lesson does not write localStorage or IndexedDB.</p>
</section>
<style>
  .draft-save { display: grid; gap: 8px; max-width: 32rem; border: 1px solid #0f766e; padding: 12px; }
  .draft-save textarea { min-height: 4rem; padding: 8px; border: 1px solid #94a3b8; }
  .note { margin: 0; color: #475569; }
</style>

  1. Pin the saved draft state.

    The example starts from a fixed saved draft state.
    The example starts from a fixed saved draft state.

  2. Label the draft field.

    The label points to the readonly draft text.
    The label points to the readonly draft text.

  3. Keep the draft content fixed.

    The draft text is fixed lesson content.
    The draft text is fixed lesson content.

  4. Show the pinned saved time.

    The status shows a fixed saved timestamp.
    The status shows a fixed saved timestamp.

  5. State what does not happen.

    The note says this static lesson does not write localStorage or IndexedDB.
    The note says this static lesson does not write localStorage or IndexedDB.

  6. Check the draft saved indicator.

    The draft has a label, fixed content, saved time, and no-storage note.
    The draft has a label, fixed content, saved time, and no-storage note.
draft state A pinned state can show that the draft is saved.
saved timestamp A visible time tells people when the save state was last updated.
no storage write The lesson should not imply localStorage or IndexedDB was written.