IndexedDBのラッパー「localoForage」を試してみた

Transcript

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

2. 自己紹介 • ⾧内毅志(Takeshi Nick Osanai) • ディベロッパーリレーションマネージャー • Movable Type

   エバンジェリスト • AWS認定ソリューションアーキテクト • 趣味 ジョギング、野球観戦 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと @Nick_smallworld

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

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

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

6. localForageのインストール(Web)

7. 書き方の違い • WebStorage • localForage

8. localForage と WebStorage ? • WebStorage と localForage で パフォーマンスは異なる?

   • 試してみた

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

10. コード(一部)

11. •デモ

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

    ・・・という結論にしようと思ったのですが

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

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