Persist Plugin ($persist)

Automatically save state to localStorage (or any storage).

Persist Plugin

The official @alpinejs/persist plugin provides the $persist magic. It automatically saves a property's value to localStorage and restores it on page load. This is perfect for preserving UI state like dark mode, sidebar open/closed, or form drafts.

Installation & Registration

npm install @alpinejs/persist

import persist from '@alpinejs/persist'
Alpine.plugin(persist)

Basic Usage

<div x-data="{ count: $persist(0) }">
  <button @click="count++">Count: <span x-text="count"></span></button>
</div>

Custom Storage Key

By default, the key is derived from the element hierarchy. You can specify a custom key for easier debugging.

<div x-data="{ count: $persist(0).as('my-counter') }">...</div>

Using Session Storage

You can switch to sessionStorage (or any other storage implementation) with the .using() method.

$persist(0).using(sessionStorage)