HTML5で使われるストレージの良いところと悪いところ 使い分け方の紹介

1. @mainyaa
モダンブラウザ
ストレージ

2. Who is me
@mainyaa
Kazuyuki Mori
Topgate, Inc.
Front/Server/Network/Machine Learning
Engineer

3. Agenda
1. モダンブラウザストレージ
2. どれを使ったらいいの？
3. Tips

4. モダンブラウザストレージ
01localStorage, sessionStorage
KVS with Index and
Transaction
RDB for Web
Old session manager
Web Storage
IndexedDB
Web SQL
Database
Cookie
02
03 04

5. Web Storage
localStorage,
sessionStorage
01

6. ■ Web Storageは、localStorageとsessionStorageという
２種類のKVSです
■ localStorage.foo = "bar"を使用して値を設定し、後で
localStorage.fooとして値を取得できます。（ブラウザー
を閉じて再度開いても）
■ sessionStorageも操作は同一ですが、ウィンドウが閉じ
られるとクリアされます。
Web Storage

7. Web Storage
・すべての最新ブラウザで
サポートされる
・シンプルで同期的
・他のタブ・ウィンドウとも同
期が取れる
・同期APIでパフォーマンスが悪
い
・サイズ制限が厳しい
・オブジェクトの格納にシリアライ
ズが必要
Pros Cons

8. Web SQL
Database
RDB for Web
02

9. ■ Web SQL Databaseは、一般的なSQLベースのリレー
ショナルデータベース
■ フィールドにインデックスを付ける機能もあるため、Web
Storageよりも検索がはるかに高速
■ 非推奨。IEやFireFoxでサポートされておらず、段階的
に廃止予定
Web SQL Database

10. Web SQL Database
・主要なモバイルブラウザ
と、いくつかのデスクトップ
ブラウザでサポート
・非同期APIであるため、
良好なパフォーマンス
・検索・トランザクション・厳
密なデータ構造
・非推奨。IEやFireFoxでサポー
トされておらず、段階的に廃止
予定
・DBスキーマの定義やマイグ
レーションなどでコードが複雑化
する
Pros Cons

11. IndexedDB
KVS with Index and
Transaction
03

12. ■ IndexedDBはWeb StorageとWeb SQL Databaseの両方の良いところを
取り入れたもの
■ IndexedDBは、オブジェクトを格納できる「オブジェクトストア」のコレクショ
ン
■ オブジェクト構造に制約はないため、テーブル定義がない
■ Web Storageに似ているが、非同期APIでパフォーマンスが非常に改善さ
れている
■ インデックスを作成して、検索速度を向上させることができる
IndexedDB

13. IndexedDB
・モダンブラウザの本命の
データベース
・非同期APIであるため、
良好なパフォーマンス
・インデックス・トランザク
ション・シンプルなAPI
・まだすべてのブラウザがサポート
されているわけではない
・Pollyfillの提供はある
Pros Cons

14. Cookie
Old session
manager
04

15. ■ 古くからあるHTTP通信のストレージ
■ 文字列しか格納できない
■ サイズ制限非常に厳しい(Safariでは1クッキーあたり
600MB)
■ 使い方を間違えると安全ではない
■ HTTPSにしてSecure属性とHttpOnly属性をつけよ
う
Cookie

16. Cookie
・適切な属性をつけ
ることでJavaScript
からアクセスできな
いストレージ
・サイズが小さく、スト
レージ用途には向かな
い
Pros Cons

17. どれをつかったらいいの？

18. ■ APIトークンの保存：
■ Cookie
■ パフォーマンスが気にならない：
■ WebStorage(localStorage)
■ SPAでローカルでアプリケーションを構築する：
■ IndexedDB
どれをつかったらいいの？

19. ■ API Tokenの保存に最適なストレージ
■ HttpOnly属性
■ JavaScriptからCookieにアクセス出来ないようにす
る。XSSでAPI Tokenが取れないため安全
■ Secure属性
■ HTTPSのURLからHTTPのURLにCookieを送信しな
い
■ https://developer.mozilla.org/ja/docs/Web/HTTP/Co
okies
Cookie

20. ■ シンプルなKVSストレージ
■ シンプルなWebアプリなら使っても良い
■ サイズ容量とパフォーマンスに注意
WebStorage(localStorage)

21. ■ 新しく始めるプロジェクトでは使うな。
Web SQL Storage

22. ■ これからいろんなブラウザに広まっていくStorage
■ 良いパフォーマンス。シンプルなAPI
■ 容量も多いし、Quota Management APIで、ユーザーに
同意を取ることで更に容量が使える
■ Polyfillもあるけど、どこまでサポートしているかはまだ
不明。
■ 今後に期待
IndexedDB

23. ■ ストレージのサポートや、サイズリミットや、サイズオー
バー時のエラー発生についてはHTML5 RocksのEiji
Kitamuraさんの記事を見てください
■ https://www.html5rocks.com/ja/tutorials/offline/quota
-research/
Tips: エラーハンドリング

24. @mainyaa
Thanks you!