【Alpine.js】Persistで簡単にlocalStorageへプロパティを保存する

PersistはAlpine.jsのプラグインです

Persistでできること

Alpine.jsのデータをlocalStorageにデータを保存できます

導入方法

CDNの方が楽な気がします。

CDN

HTMLファイルに張り付けるだけです。
ただし以下のようにAlpine.js本体のscriptの前に配置する必要があります。

<!-- Persistプラグイン -->
<script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
 
<!-- Alpine本体 -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

npm

まずnpmでインストール

npm install @alpinejs/persist

その後、バンドルするjsファイルにこう書きます。

import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'
 
Alpine.plugin(persist)

これで使えます。

使用例

このページに飛んで「incrementをクリック」→「ページリロード」をして下さい。
リロードしてもincrement後の数字が残っていることを確かめてみましょう。

なぜリロードしても保存される?

これはブラウザのlocalStorageに保存しているからです。
Persistを使えばこのようにページをリロードしてもプロパティの値を保存することができます。

使い所

公式に載っている使い所なので、気になる用途があればぜひ公式ドキュメント見てみて下さい。

①ダークモードの変更維持

アクセスする度にライトモードに戻ってるのはメンドイですよね。Alpine.store()と組み合わせてpersistで維持しちゃいましょう。

②開いたタブの維持

開いたタブやドロップダウンリストが毎回閉じられるとメンドイ場面もあります。persistで維持しちゃいましょう

使い方

最後に軽く使い方だけ説明しておきます。
基本的にはプロパティの値を$persistで囲むだけです。

                       ここ⤵︎ 
<div x-data="{ count: $persist(0) }">
    <button x-on:click="count++">Increment</button>

    <span x-text="count"></span>
</div>

その他色々使い方が公式ドキュメントに載ってますので見てみて下さい

まとめ

persistと言えば、redux-persistっていうReduxでローカルストレージを扱うライブラリもありますねぇー(関係ない)