storage-control: https://github.com/artprojectteam/storage-control

昔はデータを保存する際にはCookieを使っていました。
しかし、Cookieは4KBしか保存できないため大きなデータをブラウザに記憶させておくことができません。
そこでWebStorageというHTML APIが登場しました。
WebStorageはlocalStorageという永続的なストレージとsessionStorageという揮発性(ブラウザ閉じたら消える)のストレージがあります。
WebStorageは何と言っても5MBという大容量(※ブラウザによって変動)ということもあり、近年では積極的に使われているはず。

データの記録はkey - value形式で保存するのですが、保存形式はstringでないといけないため、配列をそのまま記憶することができません。
そこで記憶する際にはJSONに変換して文字列として記憶しておく方法が一般的です。

そういった操作を請け負うライブラリになります。

ダウンロードして使う場合

distディレクトリ内のファイルを自サーバにアップして使用してください。

<script src="dist/storage-control.js"></script>

npmでインストール

$ npm i -D storage-control

プロジェクトディレクトリで上記コマンドでインストール。
i -> install、-D -> --save-devの略。

import StorageControl from 'storage-control'

babelなどで使う際は、上記で呼び出せます。

初期化

利用するストレージを明示してください。

// sessionStorageを利用
var session = new StorageControl('session')

// localStorageを利用
var local = new StorageControl('local')

引数は必須です。
また、’session’以外の文字列を指定した場合は自動的にlocalStorageになります。

使い方

データを記録

キー名と記録するデータを渡してください。
データは[number | string | Array | object]であれば問題ありません。
メソッドチェーンが利用できます。

var storage = new StorageControl('local')

storage
  .save('foo', 0)
  .save('bar', 'string')
  .save('arr', [0,1])
  .save('obj', {a:0,b:1})

保存したデータを取得

キー名を指定します。

var data = storage.get('foo')

存在しない場合はnull、存在している場合は保存したデータを返却されます。
(文字列なら文字列、配列なら配列)

※空文字を記録していた場合はnullではなく空文字が返却されます。

キーごとデータを削除

キー名を指定すればキーごとデータを削除できます。
メソッドチェーンが利用できます。

storage
  .remove('foo')
  .remove('obj')

ストレージ内全削除

storage.clear()

Chrome拡張などで自動的に挿入されたデータも削除されるので、使う場合は要注意

ちょっとした使い方

saveとremoveはメソッドチェーンができるので下記のような事もできます。

storage
  .save('foo', 'bar')
  .remove('test')

また、getも組み合わせることも可能。

var res = storage
            .save('foo', 'bar')
            .remove('test')
            .get('foo')

※getはメソッドチェーンできないので、一番最後に一度だけ使うようにしてください。

シンプルに使えるライブラリになっているので是非使ってみてください。
storage-control: https://github.com/artprojectteam/storage-control