IndexedDBのラッパー 「localForage」を使ってみる 2019年3月20日 シックス・アパート株式会社 ⾧内毅志

自己紹介 • ⾧内毅志(Takeshi Nick Osanai) • ディベロッパーリレーションマネージャー • Movable Type エバンジェリスト • AWS認定ソリューションアーキテクト • 趣味 ジョギング、野球観戦 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと @Nick_smallworld

PWAのストレージに関するベストプラクティス https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa?hl=ja

IndexedDBとは • ブラウザで利用できるストレージ領域(DB) • Key-Value 形式でデータを保存 • ブラウザのデフォルトストレージになりつつある

localForageとは • WebStorage のような書き方でIndexedDBが使えるラッパー • Mozzila財団のメンバーがメンテナンスをしている

localForageのインストール(Web)

書き方の違い • WebStorage • localForage

localForage と WebStorage ? • WebStorage と localForage で パフォーマンスは異なる? • 試してみた

パフォーマンス計測 • for文で1000件のデータを作成 • sessionStorage、localForageで回す • 書き込み、読み出しの時間をそれぞれ計測

コード(一部)

•デモ

試した結果 • Chromeでは localForage＋IndexedDBの方が全体的に早い • 特に書き込みは数十倍のレベルでWebStorageより高速 • localForage いけるじゃん! • ・・・という結論にしようと思ったのですが

あれ…? • FireFoxではsessionStorageのほうが早い…だと…? • ベンチマークのコードの問題かも • なにかわかったら今度発表します

ありがとうございました! • シックス・アパートの⾧内でした。 • MovableType.net もよろしく お願いします。