hifiveの小さな便利機能、h5.apiの紹介「localStorage編」

hifiveには頻繁に使われるであろう機能をAPIとしてまとめており、h5.apiというネームスペースでアクセスできるようになっています。

今回はlocalStorageを便利にしてくれるh5.api.storageについて紹介します。

localStorageの利用可否を判定する

通常、WebブラウザがlocalStorageをサポートしているかどうかはwindow.localStorageという変数のあるなしで判定されます。

しかしこの方法の場合、iOS/macOSのSafariにおけるプライベートブラウジングを使っている際に問題があります。この時には window.localStorage という変数は存在するものの、実際に書き込みを行うと QuotaExceededError が発生します。

そうした場合を踏まえて h5.api.storage.isSupported を使うと正しく localStorage の利用可否を判定できます。

ループ処理をサポートするeachメソッド

この他、ちょっと便利なeachメソッドが用意されています。

セッションストレージも使えます。

オブジェクトの保存にも対応

保存時に serialize 、取得時に deserialize していますので文字列以外であっても扱えるようになっています。

幾つのキーがあるか判定できる getLength メソッド

これは localStorage.length を実行しているだけです。

機能自体は小粒ですが、頻繁に使われるであろう機能をまとめておくことで開発が効率的になります。ぜひお使いください。