localStorageを意識せずに使えるようなライブラリを作りました。

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関数は以下の処理をします。

1. localStorgeにkeyというアイテムがあるか探す
2. 存在したら、そのアイテムを返す
3. なければ、defaultValを返す
4. オブジェクトが変更された場合、自動的に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への変更が保存されなくなる