勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでlocalStorageを簡単に操作できる「store.js」ライブラリの利用方法

  JavaScript

以前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

  関連記事

JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法

以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...

JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法

あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...

JavaScriptライブラリChart.jsでグラフの描写する方法

JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...