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は手動削除しない限り消えないため)。