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は手動削除しない限り消えないため)。
関連記事
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法
「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...
-
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...