Alpine Persist: remember a reading choice without calling it shared document state

The reader chooses larger text, then reopens the page and gets the original size. Use Alpine's Persist plugin for the reader's local preference, with a deliberate storage key and a visible fallback when storage is unavailable. A browser preference does not update the document for everyone who receives it.

Use a fictional workshop note with two reading sizes: Standard and Large. The instruction itself remains “Confirm the tray count before printing labels.” Changing its font size changes presentation, not the instruction or its completion status.

Open the complete example · Download the full HTML source

Load Persist before Alpine initializes

The official Persist documentation describes plugin installation and $persist. With a compatible plugin and Alpine core loaded in the documented order, a storage-enabled component can use:

<section x-data="{ size: $persist('standard').as('workshop-reading-size-v1') }">
  <label>Reading size
    <select x-model="size">
      <option value="standard">Standard</option>
      <option value="large">Large</option>
    </select>
  </label>
  <p :style="{fontSize: size === 'large' ? '22px' : '16px'}">
    Confirm the tray count before printing labels.
  </p>
</section>

The .as() modifier chooses a custom key. Use a key belonging to this component rather than a vague name such as size that another reading tool might reuse.

This snippet assumes storage is available. The complete application must decide what to do in contexts where that assumption is false.

State what the storage does

Persist observes the value and stores it in local storage by default. Its documentation also describes .using(sessionStorage) and custom storage adapters. Choose the lifetime you actually need rather than labeling every option “saved forever.”

Local storage is not a team account or a shared record. A coworker opening a separate browser context should not be promised your preference. Keep the standard source presentation readable before any stored preference is applied.

The existing Alpine HTML guide covers component state and directives. Persist adds a storage boundary to that state; it does not add a server or document-saving operation.

Handle storage restrictions before promising persistence

The plugin's source includes a temporary-storage fallback when local storage cannot be accessed. In a constrained embedded preview, choose an explicit session-only reading state and say that it will not be retained. Do not show a reassuring “Saved” message merely because the text became larger.

Probe only your own storage keys, handle access failures, and avoid clearing unrelated site data. If an existing value under your key is malformed or outside your two supported choices, restore this component's default rather than applying an arbitrary value to styling.

Check the presentation and its retained value

Start with Standard and inspect the actual sixteen-pixel text. Choose Large and inspect twenty-two pixels as well as the stored preference where storage is available. Recreate the component from that stored value to verify the read path. A separate real reload check remains necessary before claiming reload behavior was observed in a particular host.

For a reading copy in NOS, keep the workshop instruction fixed and the size selector labeled as a reader preference. Ask about the wording of the instruction independently of how large one browser chooses to display it.