Extends the official $persist plugin to help you work with localStorage 📦
<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>npm i -D alpinejs-persist-extended
yarn add -D alpinejs-persist-extendedimport Alpine from 'alpinejs'
import storage from 'alpinejs-persist-extended'
Alpine.plugin(storage)
window.Alpine = Alpine
Alpine.start()<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>$persistGet('fullName')Gets the value from localStorage of the provided key.
$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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent