JavaScriptでlocalStorageを簡単に操作できる「store.js」ライブラリの利用方法
以前Dexie.jsを利用してIndexedDBを取り扱う方法をメモしたが、今回はlocalStorageを試してみたい。これもそのまま書こうとすると面倒くさそうだったのでライブラリを探したところ「store.js」が良さそう。以下に利用方法をメモ。
localStorageについて
リファレンス
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage
store.js
GitHub
https://github.com/marcuswestin/store.js
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/store-js@2.0.4/dist/store.legacy.min.js"></script>
利用方法
ソースコード
<script src="https://cdn.jsdelivr.net/npm/store-js@2.0.4/dist/store.legacy.min.js"></script> <script> //書き込みor更新 const user = { name : '鈴木', age : 20, flg : true, } store.set('user', user); //読み込み const storage_data = store.get('user'); console.log(storage_data); //個別削除 store.remove('user'); const storage_data = store.get('user'); console.log(storage_data); //一括削除 store.clearAll(); </script>
所感
ブラウザ側のデータを保存させたい場合、基本的にCookieで何とかなっているが過去記事のように可能な限り長期間保存したいというようなケースの場合に使っていけそう(localStorageは手動削除しない限り消えないため)。
関連記事
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...
-
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...
-
-
JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法
JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...
-
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...
-
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...