Extends Alpine JS official `$persist` plugin with enhanced localStorage functionality, expiration support, and custom storage options ðĶ
npm install alpinejs-persist-extended> [!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
``html
src="https://unpkg.com/alpinejs-persist-extended@latest/dist/cdn.min.js"
>
src="https://unpkg.com/@alpinejs/persist@latest/dist/cdn.min.js"
>
`
`shell`
yarn add -D alpinejs-persist-extended
npm install -D alpinejs-persist-extended
`js
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:
`html
@persist:delete.window="name = ''"
>
In this example:
- We initialize a persisted
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 dataAPI Reference
$3
`js
$persistGet('name')
`Gets the value from
for the provided key. This is useful when you
need to access persisted data without having to define it in your x-data
object.$3
js
$persistDelete('name')
`Removes the data from
for the specified key. When called, it also
dispatches a persist:delete custom event that you can listen for in your
Alpine components.`html
``The event listener pattern is particularly useful for resetting related data or
updating UI elements when persistence is cleared.