alpinejs-persist-extended
v1.1.3
Published
Extends the official `$persist` plugin to help you work with `localStorage` 📦
Downloads
149
Maintainers
Readme
Alpine JS Persist Extended
Extends the official $persist
plugin to help you work with localStorage
📦
Install
With a CDN
<script
defer
src="https://unpkg.com/alpinejs-persist-extended@latest/dist/storage.min.js"
></script>
<script
defer
src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"
></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
With a Package Manager
npm i -D alpinejs-persist-extended
yarn add -D alpinejs-persist-extended
import Alpine from 'alpinejs'
import storage from 'alpinejs-persist-extended'
Alpine.plugin(storage)
window.Alpine = Alpine
Alpine.start()
Example
<div
x-data="{ fullName: $persist('') }"
@persist:delete.window="fullName = $persistGet('fullName')"
>
<h2 x-text="fullName"></h2>
<input type="text" x-model="fullName" />
<button @click="alert($persistGet('fullName'))">Alert Name</button>
<button @click="$persistDelete('fullName')">Delete Name</button>
</div>
Get
$persistGet('fullName')
Gets the value from localStorage
of the provided key.
Delete
$persistDelete('fullName')
Deletes the data from localStorage
, it also emits an event that you can listen
for in Alpine JS.
<div @persist:delete.window="fullName = $persistGet('fullName')"></div>
Stats