Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

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

localStorageをgetItemしたりsetItemしたりとかめんどくさいですよね?そこで、はじめに設定したら、以降はlocalStorageを全く意識する必要がなくなるライブラリを作りました。

f:id:panda_noir:20181204134730p:plain

(イラスト: 複数のPCサーバーのイラスト | illalet(イラレット))

Storagify.jsの使い方

使い方は超絶カンタンです。まずStoragify.jsを読み込みます。

<script src="//unpkg.com/storagify.js"></script>

あとは次のようにします。

const key = 'myapp', defaultVal = {a: 1, b: 2, c:3};
const obj = Storagify(key, 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への変更が保存されなくなる