📦 Alpine JS plugin to extend the functionality of the official $persist plugin

Last update: Dec 28, 2022

Overview

Alpine JS Persist Extended

Alpine JS magic method $storage extends the official $persist plugin to help you work with local storage 📦

Example 👀

<div
  x-data="{ name: $persist('') }"
  x-on:storage-delete.window="name = $storage('name')"
>
  <h2 x-text="name"></h2>

  <input type="text" x-model="name" />

  <button x-on:click="alert($storage('name'))">Alert Name</button>

  <button x-on:click="$storage('name', 'delete')">Delete Name</button>
</div>

Get

$storage("name");

Gets the value from local storage of the provided key. It's not required, but you can pass 'get' as a second parameter.

Delete

$storage("name", "delete");

Delete the data from local storage. This also emits an event that you can listen for in Alpine JS.

<div x-on:storage-delete.window="name = $storage('name')"></div>

Install 🌟

It's very easy to install Alpine JS plugins! 🙌

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>

NPM/Yarn

npm i -D alpinejs-persist-extended

yarn add -D alpinejs-persist-extended

Then you can register the plugin.

import Alpine from "alpinejs";
import storage from "alpinejs-persist-extended";

Alpine.plugin(storage);

window.Alpine = Alpine;

Alpine.start();

Stats 📊

Here's some stats about the Alpine JS Persist Extended package! As you can see, it's tiny 🤏

Add focal point alignment of images to your Alpine 3.x components with a custom directive.

Alpine Focal Add focal point alignment of images to your Alpine 3.x components with a custom directive. This package only supports Alpine v3.x. About

Oct 12, 2021

Animate your Alpine components.

Animate your Alpine components 🚀 This package provides you with a simple helper to animate your ALpine.js components. Installation The recommended wa

Nov 16, 2022

Adds a handy $parent magic property to your Alpine components.

✨ Help support the maintenance of this package by sponsoring me. Alpine $parent Access parent components using a handy $parent magic variable. This pa

Aug 29, 2022

A clean integration between Cleave.js and Alpine. ✨

✨ Help support the maintenance of this package by sponsoring me. Alpine Mask This packages provide a custom x-mask directive and $mask magic variable,

Dec 26, 2022

A simple library for handling keyboard shortcuts with Alpine.js.

✨ Help support the maintenance of this package by sponsoring me. Alpine.js Mousetrap A simple library for handling keyboard shortcuts with Alpine.js.

Nov 14, 2022

IntelliSense for Alpine.js

IntelliSense for Alpine.js Features Provides syntax highlighting for Alpine.js directives along with autocomplete for all base directives and modifier

Nov 17, 2022

E-commerce website using Laravel, Tailwindcss and Alpine.js

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Dec 12, 2022

Multi-step wizard helpers for Alpine.js

Alpine Wizard This package provides an Alpine directive (x-wizard) and a magic helper ($wizard) that allow you to quickly build multi-step wizards usi

Dec 23, 2022

Alpine.js Language Features (Volar) extension for coc.nvim

[Experimental] coc-volar-alpinejs fork from vscode-alpine-language-features Alpine Language Features extension for coc.nvim Note @volar/alpine-languag

Oct 12, 2022

Comments

update/improvements
This PR adds some general improvements to the package.

Updated

Removed requirement to pass through _x_ on local storage keys

Removed requirement to pass 'get' when fetching data from local storage

Removed second browser event that's emitted when deleting data

enhancement
opened by markmead 0