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にて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法
JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...