Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

2019年3月20日 PWA Night のLT資料です。
未検証の部分があるため、将来的に資料をアップグレードする可能性があります。

385aac3a7e30c149bf03d3499ba9b121?s=128

Takeshi Nick Osanai

March 20, 2019
Tweet

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 もよろしく お願いします。