localStorageをgetItemしたりsetItemしたりとかめんどくさいですよね?そこで、はじめに設定したら、以降はlocalStorageを全く意識する必要がなくなるライブラリを作りました。
(イラスト: 複数のPCサーバーのイラスト | illalet(イラレット))
Storagify.jsの使い方
使い方は超絶カンタンです。まずStoragify.jsを読み込みます。
<script src="//unpkg.com/storagify.js"></script>
あとはキーと保存したいオブジェクトの初期値をStoragifyに渡します。もしキーを使ってlocalStorageから値が取得できたら、Storagifyはその値を返します。
const key = 'myapp', defaultVal = {a: 1, b: 2, c:3}; const obj = Storagify(key, defaultVal); // localStorage上に保存されていたらその値、なければdefaultValが返される。
これだけです。以降は普通のオブジェクトとして扱うことができます。
Storagify関数がやっていること
このStoragify関数は以下の処理をします。
- localStorgeにkeyというアイテムがあるか探す
- 存在したら、そのアイテムを返す
- なければ、defaultValを返す
- オブジェクトが変更された場合、自動的にlocalStorageに保存する
以上です。オブジェクトがネストしていても動作するようになっています。
Storagifyができないこと
Storagifyは内部でProxyを使っているため、配列またはオブジェクトにしか機能しません。
const number = Storagify('number', 1); // エラー
また、変数に再代入すると機能しなくなります。
const key = 'myapp', defaultVal = {a: 1, b: 2, c:3}; let obj = Storagify(key, defaultVal); obj = {d: 4, e: 5, f: 6}; // この変更も含めて以降はobjへの変更が保存されなくなる