Download as PDF, PPTX
![20110622 haruyama webso]cket](https://cdn.slidesharecdn.com/ss_thumbnails/20110622haruyamawebsocket-110703040231-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
モダンブラウザストレージ
- 1.
- 2. Who is me @mainyaa KazuyukiMori Topgate, Inc. Front/Server/Network/Machine Learning Engineer
- 3.
- 4. モダンブラウザストレージ 01localStorage, sessionStorage KVS withIndex and Transaction RDB for Web Old session manager Web Storage IndexedDB Web SQL Database Cookie 02 03 04
- 5.
- 6. ■ Web Storageは、localStorageとsessionStorageという ２種類のKVSです ■localStorage.foo = "bar"を使用して値を設定し、後で localStorage.fooとして値を取得できます。（ブラウザー を閉じて再度開いても） ■ sessionStorageも操作は同一ですが、ウィンドウが閉じ られるとクリアされます。 Web Storage
- 7.
- 8. Web SQL Database RDB forWeb 02
- 9. ■ Web SQLDatabaseは、一般的なSQLベースのリレー ショナルデータベース ■ フィールドにインデックスを付ける機能もあるため、Web Storageよりも検索がはるかに高速 ■ 非推奨。IEやFireFoxでサポートされておらず、段階的 に廃止予定 Web SQL Database
- 10.
- 11. IndexedDB KVS with Indexand Transaction 03
- 12. ■ IndexedDBはWeb StorageとWebSQL Databaseの両方の良いところを 取り入れたもの ■ IndexedDBは、オブジェクトを格納できる「オブジェクトストア」のコレクショ ン ■ オブジェクト構造に制約はないため、テーブル定義がない ■ Web Storageに似ているが、非同期APIでパフォーマンスが非常に改善さ れている ■ インデックスを作成して、検索速度を向上させることができる IndexedDB
- 13.
- 14.
- 15. ■ 古くからあるHTTP通信のストレージ ■ 文字列しか格納できない ■サイズ制限非常に厳しい(Safariでは1クッキーあたり 600MB) ■ 使い方を間違えると安全ではない ■ HTTPSにしてSecure属性とHttpOnly属性をつけよ う Cookie
- 16.
- 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 SQLStorage
- 22. ■ これからいろんなブラウザに広まっていくStorage ■ 良いパフォーマンス。シンプルなAPI ■容量も多いし、Quota Management APIで、ユーザーに 同意を取ることで更に容量が使える ■ Polyfillもあるけど、どこまでサポートしているかはまだ 不明。 ■ 今後に期待 IndexedDB
- 23. ■ ストレージのサポートや、サイズリミットや、サイズオー バー時のエラー発生についてはHTML5 RocksのEiji Kitamuraさんの記事を見てください ■https://www.html5rocks.com/ja/tutorials/offline/quota -research/ Tips: エラーハンドリング
- 24.