localStorageをwrapしてくれるnpmパッケージ、store.jsについて調べた

いきさつ

localStrageを使う機会があった。

今までは普通にlocalStrageを使っていたが、

npmにlocalStrageのwrapperがあるのを職場の人が見つけてくれた。

github.com

気になったので少し調べてみた。

概要

ブラウザやそのバージョンによって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されない。