次の方法で共有

DOM ストレージの概要

  • [アーティクル]

DOM ストレージ API には、ドキュメント オブジェクト モデル (DOM) を使用してクライアント サイド データをセキュアに保存するための関連メカニズムとして、 sessionStorage および localStorage の 2 つが含まれています。 これらのオブジェクトは Internet Explorer 8 で導入されました。

メモ : Internet Explorer の従来のバージョンでは、永続的なデータ記憶域の実装に userData 動作が使用されていました。

このトピックは、次の各セクションで構成されています。

  • DOM ストレージについて
  • DOM ストレージのスクリプティング オブジェクト
    • window.sessionStorage
    • window.localStorage
    • ストレージ オブジェクト
  • DOM ストレージ イベント
    • onstorage
    • onstoragecommit
  • セキュリティおよびプライバシー
    • 最上位ブラウジング コンテキストとオリジン
    • オリジンによって決定される容量制限
    • 記憶域のクリア
  • 関連トピック

DOM ストレージについて

DOM ストレージは HTTP Cookie とよく比較されます。 Cookie と同じように、Web 開発者は DOM ストレージを使用して、セッション別のデータまたはドメイン固有のデータを名前/値ペアとしてクライアントに保存できます。 ただし、Cookie とは異なり、DOM ストレージを使用すると、1 つのウィンドウで保存された情報を他のウィンドウで認識できるようにする方法を簡単に制御できます。

たとえば、2 回のフライト (それぞれ違う便) 用の航空券を購入したいユーザーが、2 つのブラウザー ウィンドウを開く場合があります。 しかし、航空会社の Web アプリケーションが Cookie を使用してセッション状態を保存している場合、一方のトランザクションからもう一方のトランザクションへ情報が "リーク" し、ユーザーが知らない間に同じフライトの航空券を 2 枚購入することになる可能性があります。 後でサーバーに戻るときに備えて値をローカルで保存するなど、アプリケーションがオフライン動作を処理できるようになると、このような情報 "リーク" の可能性がさらに高まります。

また、DOM ストレージでは、Cookie よりもかなり多くのディスク領域が提供されます。 Internet Explorer の場合、Cookie は 4 KB (キロバイト) までのデータしか保存できません。 4 KB の名前/値ペア 1 つの場合もありますし、合計サイズが 4 KB になる最大 20 個の名前/値ペアの場合もあります。 一方、DOM ストレージでは、記憶域ごとに約 10 MB (メガバイト) が提供されます。

機能的な面から見て、クライアント記憶域は Cookie とはかなり違います。 DOM ストレージでは、Cookie のように要求ごとにサーバーに値が転送されることはなく、ローカル記憶域内のデータが期限切れになることもありません。 また、Cookie とは異なり、ブラウザー ベンダー各社によるサポートが強化されつつある標準インターフェイスを使用して、個々のデータへ容易にアクセスできます。

DOM ストレージのスクリプティング オブジェクト

  • window.sessionStorage
  • window.localStorage
  • ストレージ オブジェクト

window.sessionStorage

セッション記憶域は、ユーザーが 1 つのトランザクションを実行するシナリオを前提として設計されています。 window オブジェクトの sessionStorage 属性が 1 つのタブの寿命 (最上位ブラウジング コンテキストの存続期間) 全体を通じて、読み込まれる全ページのキー/値ペアを維持します。 たとえば、ユーザーが保険を希望するかどうかを選択するためのチェック ボックスをページに含めることができます。

<label>
    <input type="checkbox" onchange="sessionStorage.insurance = checked">
    I want insurance on this trip.
</label>

後続のページでは、ユーザーがそのチェック ボックスをオンにしたかどうかをスクリプトからチェックすることができます。

if (sessionStorage.insurance) { ... }

Storage オブジェクトは expando プロパティをサポートします (前述の例では "insurance")。 このプロパティ名が存在しない場合は、キー/値ペアが自動的に作成され、このプロパティが確保されます。 キー/値ペアは常に文字列として保存される点に注意してください。 異なるデータ型 (数値、ブール値、構造化データなど) は、文字列に変換してから記憶域に保存する必要があります。

sessionStorage に保存された値は、同じコンテキスト内の別のページで動作するスクリプトから取得することができます。 別のドキュメントが読み込まれると、同じ元の URL のメモリから sessionStorage が初期化されます (詳細については、「セキュリティおよびプライバシー」を参照してください)。

メモ : ブラウザーのクラッシュから回復した後で sessionStorage を再開することは、 HTML 5 (ワーキング ドラフト)  World Wide Web リンク で認められていますが、Internet Explorer 8 ではこの動作が行われません。

window.localStorage

ローカル記憶域のメカニズムは、複数のウィンドウにまたがり、現在のセッション以後も存続します。 localStorage 属性は、ドメインの永続記憶域を提供します。 この属性により、Web アプリケーションはパフォーマンス目的で約 10 MB のユーザー データ (ドキュメント全体、ユーザーのメールボックスなど) をクライアントに保存できます。

たとえば、Web サイトで次のスクリプトを使用すると、ユーザーが特定のページを訪問した回数を表示できます。

<p>
  You have viewed this page
  <span id="count">an untold number of</span>
  time(s).
</p>
<script>
  var storage = window.localStorage;
  if (!storage.pageLoadCount) storage.pageLoadCount = 0;
  storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;
  document.getElementById('count').innerHTML = storage.pageLoadCount;
</script>

メモ : pageLoadCount を増分するには、事前に parseInt メソッド (JScript 5.6) を使用して数値に変換する必要があります。

各ドメインおよびサブドメインに、それぞれ独自のローカル記憶域があります。 ドメインはサブドメインの記憶域にアクセスでき、サブドメインは親ドメインの記憶域にアクセスできます。 たとえば、localStorage['example.com'] は example.com およびそのサブドメインからアクセスできます。 サブドメイン localStorage['www.example.com'] は example.com からはアクセスできますが、mail.example.com など、他のサブドメインからアクセスすることはできません。

ストレージ オブジェクト

次のプロパティおよびメソッドは、セッション オブジェクトおよびローカル記憶域オブジェクトの両方でサポートされます。

clear メソッド

DOM ストレージからすべてのキーと値のペアを削除します。

constructor プロパティ

オブジェクトのコンストラクターを指す参照を返します。

getItem メソッド

DOM ストレージ キーに関連付けられた現在値を取得します。

key メソッド

コレクションから、指定されたインデックスのキーを取得します。

length プロパティ

キーと値一覧の長さを取得します。

remainingSpace プロパティ

記憶域オブジェクトに使用する、残りのメモリ スペースをバイトで返します。

removeItem メソッド

DOM ストレージ コレクションからキーと値のペアを削除します。

setItem メソッド

キーと値のペアを設定します。

DOM ストレージ イベント

記憶域のデータが更新されると Internet Explorer でイベントが生成され、ブラウザーまたはタブの複数のインスタンスで情報が同期されます。

次のイベントがサポートされています。

  • onstorage
  • onstoragecommit

onstorage

記憶域に変更が加えられると、 document 内で onstorage イベントが生成されます。 同じセッション コンテキストを共有するすべてのドキュメント、およびローカル記憶域がコミットする同じドメインまたはサブドメインからページを現在表示しているドキュメントが、イベントを受信します。

ターゲットの document オブジェクトが現在アクティブでない場合、Internet Explorer はイベントを生成しません。

onstoragecommit

Internet Explorer は、XML ファイルを使用してローカル記憶域を保存します。 onstoragecommit イベントは、ローカル記憶域がディスクに書き込まれる時点で生成されます。

セキュリティおよびプライバシー

ローカル記憶域に保存されたデータは、Cookie に保存されたデータよりもはるかにパブリックで、ドメイン内の特定のパスに制限することができます。 ストレージ オブジェクトではキーを列挙する方法が提供されるので、推定しにくいキーを選んでも、プライバシーは確保できません。

次の点について考慮する必要があります。

  • 最上位ブラウジング コンテキストとオリジン
  • オリジンによって決定される容量制限
  • 記憶域のクリア

最上位ブラウジング コンテキストとオリジン

セッション記憶域へのアクセスは、最上位のブラウジング コンテキストによって制限されます。 Internet Explorer では、タブごとに新しいブラウジング コンテキストが作成されます。 1 つの最上位ブラウジング コンテキストで動作するスクリプトは、他の最上位ブラウジング コンテキストで作成された記憶域にアクセスできません。 サイトはセッション記憶域にデータを追加することができ、同じウィンドウ内で開かれた、"そのオリジンからの任意のページ" にアクセスすることができます。

オリジンは、プロトコル、ホスト名 (または IP アドレス)、およびドキュメント URL のポート番号によって判別されます。 スクリプトのオリジンが記憶域のオリジンと一致する場合にのみ、記憶域のデータへのスクリプト アクセスが許可されます。

オリジンによって決定される容量制限

ディスク クォータの制限は、値が設定されるドメインではなく、値を設定するページのドメインに対して課されるため、 悪意あるスクリプトが関連ドメインの記憶域クォータを使い切ったり、 ランダムなサブドメインを使用して無制限にデータを保存したりする事態を防止できます。

記憶容量のサイズは、すべてのキー名と値の長さの合計として計算されます。1 つの記憶域の容量は最大 1,000 万バイトです。 記憶域の空き容量を調べるには、 remainingSpace プロパティを使用します。

記憶域のクリア

データを参照する最後のウィンドウが閉じられた時点で、セッション状態が解除されます。 ただし、Internet Explorer で [ツール] メニューの [閲覧履歴の削除] をクリックし、[Cookie] チェック ボックスをオンにして [削除] をクリックすることで、いつでも記憶域をクリアできます。 これにより、[お気に入り] フォルダー以外のすべてのドメインについて、セッション記憶域およびローカル記憶域がクリアされ、レジストリ内のストレージ クォータがリセットされます。 ソースにかかわらず、すべての記憶域を削除するには、[お気に入り Web サイト データの保持] チェック ボックスをオフにします。

記憶域のリストからキー/値ペアを削除するには、コレクション全体で removeItem を繰り返します。また、すべての項目を一度に削除するには clear を使用します。 ローカル記憶域に加えた変更は、ディスクに非同期で保存されることに留意してください。

関連トピック