localStorageをwrapしてくれるnpmパッケージ、store.jsについて調べた
いきさつ
localStrageを使う機会があった。
今までは普通にlocalStrageを使っていたが、
npmにlocalStrageのwrapperがあるのを職場の人が見つけてくれた。
気になったので少し調べてみた。
概要
ブラウザやそのバージョンによってlocalStrageの扱いが異なり、
要件によっては対応が必要になることがある。
store.jsはその差異を吸収してくれる。
(ただ、localStrageはIE8以上なら搭載されているのでだいたい大丈夫)
また、pluginを導入することにより、
通常のlocalStrageにない機能を追加できたりする。
標準との違い
chrome標準
localStorage.setItem('myCat', 'Tom'); // undefined
store.js
import store from 'store' store.set('myCat', 'Tom'); // Tom
undefinedが帰ってくるよりははるかに便利。
実装
set
set: function(key, value) { if (value === undefined) { return this.remove(key) } this.storage.write(this._namespacePrefix + key, this._serialize(value)) return value },
たしかにsetする値が帰ってくる。
仕組みについて
ブラウザやそのバージョンによってlocalStrageの扱いが異なるが、
store.jsはその差異を吸収してくれる。
ここについて少し気になったのでもう少し読んでみることにした。
ざっくりした構成要素
図のような構成のおかげで、storeオブジェクトを使用する側はlocalStrageなのかcookieStorageなんか
memoryStrageを使っているのか気にせず書くことができる。
ただし実際に使うstorageは1つなので、
初期化した時にどのstorageを使うかを決めているはず。
どのstorageを使用するかを、どうやって判断しているか
storeオブジェクトが初期化されときに、
addStorargeというmethodが呼ばれる。
各storage候補を引数に与えて、そのstorageに対してtestが行われ、
ちゃんと動いたstorageを使用storageとして採用しているみたい。
_addStorage: function(storage) { if (this.enabled) { return } if (this._testStorage(storage)) { // この部分 this.storage = storage this.enabled = true } },
localStorage, globalStorage, userDataStorage, cookieStorage, sessionStorage, memoryStorage
の順でtestが行われる。動くstorageがあったら以降のstorageはtestされない。