Important
This plugin is no longer maintained or supported.
Extends the official Alpine JS $persist
plugin with additional utilities to
help you work with localStorage
more effectively. This plugin adds methods to
get and delete persisted data without needing to set up additional data
properties.
- 📌
$persistGet
: Retrieve persisted data directly from localStorage without defining an x-data property - 🗑️
$persistDelete
: Remove items from localStorage and trigger custom events - 🔄 Works seamlessly alongside the official Alpine JS persist plugin
- 🪶 Lightweight solution (under 1KB minified)
- ⛓️ Zero dependencies beyond Alpine JS and the official persist plugin
<script
defer
src="https://unpkg.com/alpinejs-persist-extended@latest/dist/cdn.min.js"
></script>
<script
defer
src="https://unpkg.com/@alpinejs/persist@latest/dist/cdn.min.js"
></script>
<script defer src="https://unpkg.com/alpinejs@latest/dist/cdn.min.js"></script>
yarn add -D alpinejs-persist-extended
npm install -D alpinejs-persist-extended
import Alpine from 'alpinejs'
import storage from 'alpinejs-persist-extended'
Alpine.plugin(storage)
window.Alpine = Alpine
Alpine.start()
Here's a practical example showing how to use the extended persist functionality:
<div
x-data="{ name: $persist('Rob Brydon') }"
@persist:delete.window="name = ''"
>
<h2 x-text="name"></h2>
<input type="text" x-model="name" placeholder="Enter your name" />
<button type="button" @click="alert($persistGet('name'))">
Show persisted name
</button>
<button type="button" @click="$persistDelete('name')">Reset name</button>
</div>
In this example:
- We initialize a persisted
name
property that saves to localStorage - When the name is deleted, we listen for the
persist:delete
event - We provide UI controls to view and delete the persisted data
$persistGet('name')
Gets the value from localStorage
for the provided key. This is useful when you
need to access persisted data without having to define it in your x-data
object.
$persistDelete('name')
Removes the data from localStorage
for the specified key. When called, it also
dispatches a persist:delete
custom event that you can listen for in your
Alpine components.
<div @persist:delete.window="name = ''"></div>
The event listener pattern is particularly useful for resetting related data or updating UI elements when persistence is cleared.