このエントリーをはてなブックマークに追加
>> HTML5

Storage(ストレージ)

Storageとは

データーをブラウザーに保存するための仕組みです。 古くはCookieがありましたが、容量制限が厳しいのと、モバイルで使うには転送量が増えて使いにくいなど、いろいろ問題があって 新たにHTML5ではストレージ系のAPIがいくつか出てきました。

モバイル・パソコンの両方の主なブラウザーで使えるHTML5は、WebStorage(ローカルストレージとセッションストレージ)のみ

(何をモバイル・パソコンの両方の主なブラウザーとするかは個人によって異なる)

Storage系 API HTML5での対応状況 via HTML5Test

Android(Chrome32) iOS7 パソコン Chrome32 パソコン IE11
LocalStorage/ローカルストレージ 対応 対応 対応 対応
SessionStorage/セッションストレージ 対応 対応 対応 対応
IndexedDB/インデックスド・データーベース 対応 X 対応 対応
Blob/ブロブ 対応 X X X 対応
ArrayBuffer/アレイバッファ 対応 対応 X 対応 対応
Web SQL/ウェブ・エスキューエル 対応 対応 対応 X

Storage系 API詳細

LocalStorage

WebStorageの仕様の一部

ハッシュテーブルのように単純にキーと値でデーターを保存します。 保存されたデーターはブラウザーを終了しても残ります。 プロトコル://ドメイン名:ポート番号からなるオリジン単位で保存されます。 保存したデーターはどのタブやウインドウからも使うことができます。

最大保存容量が、各ブラウザーによって異なるので注意が必要です。

Chromeブラウザーですと容量制限は5MBです。

あと、保存された内容は端末上のどこかにあるので、見られると問題が起きるものは保存してはいけません。

SessionStorage

WebStorageの仕様の一部

ほぼLocalStorageと同じ仕様です。 違うのは、タブ単位でデーターが存在します。そのタブを閉じるとデーターが消えます。なので、他のタブからは見ることが出来ません。

本来サーバーのセッション機能で保存するような内容をブラウザーで保存する時とかに使うといいでしょう。(複数のページをまたがるフォーム入力とか)

IndexedDB

複雑なデーターベース操作をブラウザー上で行うためのAPIです。 iOSが対応してませんが、業界標準になりつつあります。

WebSQL

昔ながらのSQLデーターベースをブラウザーでも使えるという仕様だったのですが、なぜか採用されませんでした。 IndexedDBで置き換える方向に向かっているので将来的に使えなくなる可能性が非常に高いです。

ただし、iOSがIndexedDBを採用しないので、モバイル限定ですと使わざるを得ない場合も多いかもしれません。

その他

ファイルを保存といえば、File API:Directories and Systemもありますが、これはChrome以外には採用されず、仕様から外れました。

その他にもアプリケーションキャッシュ APIという物もありますが、これは別な所で説明したいです。


関連サイト
www.akjava.com | github.com/akjava
Copyright (C) 2008-20014 Aki Miyazakion Google+ All Rights Reserved.