利用者:Katsutoshi Seki/sandbox

https://en.wikipedia.org/wiki/Web_storage

en:Web storage (04:06, 19 September 2019‎‎) の翻訳

---

ウェブストレージは、DOMストレージ (Document Object Modelストレージ)と呼ばれることもあり、ウェブアプリケーションにクライアント側のデータを保存する方法とプロトコルを提供する。ウェブストレージは永続性のあるデータストレージをサポートするという点で HTTP cookie（クッキー）と似ているが、容量が拡大され、HTTP request headerに情報が保存されなくなった。ウェブストレージにはローカルストレージとセッションストレージという2つの主なタイプがあり、それぞれpersistent cookieと session cookieと同様にふるまう。ウェブストレージはWorld Wide Web Consortium によって標準化されていて、すべての主要なブラウザーにサポートされている。

特徴

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

目的

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

ストレージの大きさ

クッキーは4 KBに制限される。ウェブストレージの要領ははるかに大きい。

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

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

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

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

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

使用法

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

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

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

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

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

ストレージのAPIでは文字列のみ保存できる。他のデータ型を保存しようとすれば、多くのブラウザでは自動的に文字列に変換される。しかし、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 の記事に書き換えられた。

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

ウェブストレージの管理

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

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

• Google Chrome records Web storage data in a SQLite file in the user's profile. The subfolder containing this file is "\AppData\Local\Google\Chrome\User Data\Default\Local Storage" on Windows, and "~/Library/Application Support/Google/Chrome/Default/Local Storage" on macOS.

• Opera's Web storage is located in either "\AppData\Roaming\Opera\Opera\sessions\autosave.win" or "\AppData\Local\Opera\Opera\pstorage\" depending upon Opera's version.

• Internet Explorer's Web storage is "\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage".

関連項目

• Indexed Database API

外部リンク

• W3C: Web Storage
• Web Storage API on Mozilla Developer Network
• Opera: Web Storage: easier, more powerful client-side data storage
• Local Storage on BlackBerry DevZone