https://github.com/markmead/alpinejs-persist-extended
Extends the official `$persist` plugin to help you work with `localStorage` ðĶ
https://github.com/markmead/alpinejs-persist-extended
alpine-js alpinejs alpinejs-persist alpinejs-plugin javascript javascript-localstorage localstorage
Last synced: about 1 year ago
JSON representation
Extends the official `$persist` plugin to help you work with `localStorage` ðĶ
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-persist-extended
- Owner: markmead
- License: mit
- Created: 2022-07-02T09:22:22.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T10:53:22.000Z (about 2 years ago)
- Last Synced: 2024-10-14T08:24:38.274Z (over 1 year ago)
- Topics: alpine-js, alpinejs, alpinejs-persist, alpinejs-plugin, javascript, javascript-localstorage, localstorage
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/storage-extended
- Size: 29.3 KB
- Stars: 19
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS 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.
## Benefits
- ð `$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
## Install
### CDN
```html
```
### Package
```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()
```
## Example
Here's a practical example showing how to use the extended persist
functionality:
```html
Show persisted name
Reset name
```
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
## API Reference
### Get
```js
$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.
### Delete
```js
$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.
```html
```
The event listener pattern is particularly useful for resetting related data or
updating UI elements when persistence is cleared.