ウェブストレージ

ウェブストレージはクッキーといくつかの点で異なる。

目的

クッキーはサーバーとの通信を目的としているため、すべてのリクエストに自動的に加えられ、サーバーとクライアント側の双方からアクセス可能である。ウェブストレージにアクセスできるのはクライアントサイドスクリプティングのみに限定される。ウェブストレージのデータはHTTPのリクエストごとにサーバーに自動的に送信されるわけではなく、またウェブサーバーがウェブストレージに直接書き込むことはできない。 ただし、クライアント側でこれらの効果を実現するようなスクリプトを明示的に書くことは可能であり、クライアント側からはサーバーと望み通りの通信ができるような細かい制御が実現できる。

ストレージの大きさ

クッキーは4 KBに制限される。ウェブストレージの容量はそれよりもはるかに大きい。

• Mozilla Firefoxはオリジンごとに5 MBの容量がある^[5]。
• Google Chromeはオリジンごとに10 MB の容量がある^[6]。
• Internet Explorerはストレージエリアごとに 10 MB の容量がある^[7]。

ローカルストレージとセッションストレージ

ウェブストレージには、ローカルストレージとセッションストレージという2つの異なるストレージエリアがあり、有効範囲（スコープ）と有効期限が異なる。 ローカルストレージに保存されるデータの有効範囲は、 同一生成元ポリシーで規定されているように、同じプロトコル、ホスト名、およびポート番号の組み合わせごとである。 データは、以前にデータを保存したページと同じオリジンのページから読み込まれるすべてのスクリプトから利用でき、ブラウザが閉じられた後も保存される。 そのため、ウェブストレージにはRFC 6265のセクション8.5および8.6に書かれているクッキーの弱い完全性および弱い機密性のような問題がない。セッションストレージの有効範囲は、オリジンごとであって、さらにインスタンスごと（ウィンドウごとまたはタブごと）であり、インスタンスの有効期限に限定される。 セッションストレージは、同じウェブアプリケーションの異なるインスタンスが互いに干渉することなく異なるウィンドウで実行できるように設計されている。これはクッキーで十分にサポートされていない利用法である^[8]。

インターフェイスとデータモデル

ウェブストレージは、キーと値の両方が文字列である連想配列データモデルを採用しているため、クッキーよりも優れたプログラムのインターフェイスが提供されている。 データモデルにアクセスするための追加のAPIが、W3C Webアプリケーションワーキンググループによって検討されている^[9]。

ウェブストレージをサポートするブラウザはwindowレベルで宣言される sessionStorage と localStorage というグローバールオブジェクトを持っている。以下のJavaScriptコードによって、これらのブラウザでウェブストレージを動作させることができる。

// セッション期限に限ってブラウザに値を保存する
sessionStorage.setItem('key', 'value');

// 値を得る (ブラウザを閉じて再度開くと消去される)
alert(sessionStorage.getItem('key'));

// セッション期間を超えてブラウザに値を保存する
localStorage.setItem('key', 'value');

// 値を得る (ブラウザを閉じて再度開いても継続する)
alert(localStorage.getItem('key'));

ストレージのAPIでは文字列のみ保存できる^[10]。他のデータ型を保存しようとすれば、多くのブラウザでは自動的に文字列に変換される。しかし、JSONに変換すれば、JavaScriptのオブジェクトを効率的に保存することができる。

// 文字列のかわりにオブジェクトを保存する
localStorage.setItem('key', {name: 'value'});
alert(typeof localStorage.getItem('key')); // string

// 文字列のかわりに整数を保存する
localStorage.setItem('key', 1);
alert(typeof localStorage.getItem('key')); // string

// JSONを使ってオブジェクトを保存する
localStorage.setItem('key', JSON.stringify({name: 'value'}));
alert(JSON.parse(localStorage.getItem('key')).name); // value

W3Cの文書は「Web Storage」というタイトルである。「DOM storage」という名称も一般的に使われていたが、あまり使われなくなってきた。たとえば、MozillaとMicrosoftの開発者サイトではDOM Storageの記事がWeb Storageの記事に書き換えられた^{[11][12][13][14]}。

DOMストレージの「DOM」は、文字通りDocument Object Modelを意味しない。 W3Cによれば、「DOMという用語は、ウェブアプリケーションのスクリプトで使用できるAPI群を指すために使用され、実際にDocumentオブジェクトが存在することを必ずしも意味しない」^[15]。

ウェブストレージオブジェクトの保存は現在のすべてのサポートするウェブブラウザでデフォルトで有効にされていて、ブラウザのベンダーごとに、ユーザーがウェブストレージを有効・無効にする方法、そしてウェブストレージの「キャッシュ」を消去する方法が提供されている^[16]。同様にウェブストレージを制御する方法は、サードパーティーのブラウザ拡張機能によっても可能である。ブラウザごとにウェブストレージのオブジェクトを保存する方法が次のように異なっている。

• Firefoxではウェブストレージのオブジェクトをユーザープロフィールのフォルダの webappsstore.sqlite というSQLiteのファイル webappsstore.sqlite に保存する^[17]。

• Google ChromeはウェブストレージのデータをユーザープロフィールのSQLiteファイルに保存する。このファイルが保存されているサブフォルダはWindowsでは \AppData\Local\Google\Chrome\User Data\Default\Local Storage であり、macOSでは ~/Library/Application Support/Google/Chrome/Default/Local Storage である^[18]。

• Operaのウェブストレージは、Operaのバージョンによって \AppData\Roaming\Opera\Opera\sessions\autosave.win か、あるいは \AppData\Local\Opera\Opera\pstorage\ のいずれかに保存される^[19]。

• Internet Explorerのウェブストレージは \AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage である。

• Indexed Database API