|
https://en.wikipedia.org/wiki/Web_storage
[[:en:Web storage]] (04:06, 19 September 2019) の翻訳
[[ウェブストレージ]]
-----
'''ウェブストレージ'''(Web storage)は、'''DOMストレージ''' ([[Document Object Model]] storage)と呼ばれることもあり、[[ウェブアプリケーション]]にクライアント側のデータを保存する方法とプロトコルを提供する。ウェブストレージは[[永続性]]のあるデータストレージをサポートするという点で [[HTTP cookie]]（クッキー）と似ているが、容量が拡大され<ref>Opera Web Storage, 2011 http://dev.opera.com/articles/view/web-storage/</ref>、[[:en:List of HTTP headers|HTTP request header]]に情報が保存されなくなった<ref>AndyHume.net, 2011 http://blog.andyhume.net/localstorage-is-not-cookies</ref>。ウェブストレージにはローカルストレージ(local storage)とセッションストレージ(session storage)の２種類があり、それぞれ[[:en:persistent cookie|persistent cookie]]と[[:en:session cookie|session cookie]]と同様にふるまう。ウェブストレージは[[World Wide Web Consortium]]によって標準化されていて<ref>[http://www.w3.org/TR/webstorage/ Web Storage]. W3.org. Retrieved on 2011-06-12.</ref>、すべての主要なブラウザーにサポートされている。
== 特徴 ==
ウェブストレージはクッキーといくつかの点で異なる。
; 目的
: クッキーはサーバーとの通信を目的としているため、すべてのリクエストに自動的に加えられ、サーバーとクライアント側の双方からアクセス可能である。ウェブストレージにアクセスできるのは[[:en:client-side scripting|クライアントサイドスクリプティング]]のみに限定される。ウェブストレージのデータはHTTPのリクエストごとにサーバーに自動的に送信されるわけではなく、またウェブサーバーがウェブストレージに直接書き込むことはできない。 ただし、クライアント側でこれらの効果を実現するようなスクリプトを明示的に書くことは可能であり、クライアント側からはサーバーと望み通りの通信ができるような細かい制御が実現できる。
; ストレージの大きさ
: クッキーは4 KBに制限される。ウェブストレージの容量はそれよりもはるかに大きい。
:* [[Mozilla Firefox]]は[[同一生成元ポリシー|オリジン]]ごとに5 MBの容量がある<ref>[http://ejohn.org/blog/dom-storage/ John Resig: DOM Storage]. John Resig, ''ejohn.org''. Retrieved on 2011-06-12.</ref>。
:* [[Google Chrome]]はオリジンごとに10 MB の容量がある<ref>{{cite web|url=https://chromiumcodereview.appspot.com/21680002|title=Issue 21680002: Up the window.localstorage limit to 10M from 5M. - Code Review|website=chromiumcodereview.appspot.com|accessdate=2020-01-13}}</ref>。
:* [[Internet Explorer]]はストレージエリアごとに 10 MB の容量がある<ref>[http://msdn.microsoft.com/en-us/library/bg142799(v=vs.85).aspx#_objmodel: Introduction to Web Storage]. ''Microsoft Developer Network'', ''msdn.microsoft.com''. Retrieved on 2014-08-05.</ref>。
; ローカルストレージとセッションストレージ
: ウェブストレージには、ローカルストレージとセッションストレージという2つの異なるストレージエリアがあり、有効範囲（スコープ）と有効期限が異なる。 ローカルストレージに保存されるデータの有効範囲は、 [[同一生成元ポリシー]]で規定されているように、同じプロトコル、ホスト名、およびポート番号の組み合わせごとである。 データは、以前にデータを保存したページと同じオリジンのページから読み込まれるすべてのスクリプトから利用でき、ブラウザが閉じられた後も保存される。 そのため、ウェブストレージには{{IETF RFC|6265}}のセクション8.5および8.6に書かれているクッキーの弱い完全性および弱い機密性のような問題がない。セッションストレージの有効範囲は、オリジンごとであって、さらにインスタンスごと（ウィンドウごとまたはタブごと）であり、インスタンスの有効期限に限定される。 セッションストレージは、同じウェブアプリケーションの異なるインスタンスが互いに干渉することなく異なるウィンドウで実行できるように設計されている。これはクッキーで十分にサポートされていない利用法である<ref>[https://html.spec.whatwg.org/multipage/webstorage.html#introduction-15 W3C: HTML Living Standard]. (2020-01-09). Retrieved on 2020-01-13.</ref>。
; インターフェイスとデータモデル
: ウェブストレージは、キーと値の両方が[[文字列]]である[[連想配列]][[データモデル]]を採用しているため、クッキーよりも優れたプログラムのインターフェイスが提供されている。 データモデルにアクセスするための追加の[[アプリケーションプログラミングインタフェース|API]]が、W3C Webアプリケーションワーキンググループによって検討されている<ref>[http://www.w3.org/TR/IndexedDB/ W3C: Indexed Database API]. W3C. Retrieved on 2012-02-12.</ref>。
==使用法==
ウェブストレージをサポートするブラウザはwindowレベルで宣言される <code>sessionStorage</code> と <code>localStorage</code> というグローバールオブジェクトを持っている。以下の[[JavaScript]]コードによって、これらのブラウザでウェブストレージを動作させることができる。
<source lang="javascript">
// セッション期限に限ってブラウザに値を保存する
sessionStorage.setItem('key', 'value');
// 値を得る (ブラウザを閉じて再度開くと消去される)
alert(sessionStorage.getItem('key'));
// セッション期間を超えてブラウザに値を保存する
localStorage.setItem('key', 'value');
// 値を得る (ブラウザを閉じて再度開いても継続する)
alert(localStorage.getItem('key'));
</source>
ストレージのAPIでは文字列のみ保存できる<ref>W3C, 2011 http://dev.w3.org/html5/webstorage/</ref>。他のデータ型を保存しようとすれば、多くのブラウザでは自動的に文字列に変換される。しかし、[[JavaScript Object Notation|JSON]]に変換すれば、JavaScriptのオブジェクトを効率的に保存することができる。
<source lang="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
</source>
==名称==
W3Cの文書は「Web Storage」というタイトルである。「DOM storage」という名称も一般的に使われていたが、あまり使われなくなってきた。たとえば、MozillaとMicrosoftの開発者サイトではDOM Storageの記事がWeb Storageの記事に書き換えられた<ref>{{Cite web |url=https://developer.mozilla.org/En/DOM:Storage |title=DOM Storage |website=Mozilla Developer Network |access-date=2011-06-12|archive-url=https://web.archive.org/web/20110604140851/https://developer.mozilla.org/En/DOM:Storage |archive-date=June 4, 2011 |url-status=dead}}</ref><ref>{{Cite web |url=https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API |title=Web Storage API |website=Mozilla Developer Network |access-date=June 28, 2017}}</ref><ref>{{Cite web |url=http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx |title=Introduction to DOM Storage |website=Microsoft Developer Network |access-date=2011-06-12 |archive-url=https://web.archive.org/web/20110608180129/http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx |archive-date=June 8, 2011 |url-status=dead}}</ref><ref>{{Cite web |url=https://msdn.microsoft.com/en-us/library/bg142799(v=vs.85).aspx |title=Introduction to Web Storage |website=Microsoft Developer Network |access-date=June 28, 2017}}</ref>。
DOMストレージの「DOM」は、文字通り[[Document Object Model]]を意味しない。 W3Cによれば、「DOMという用語は、ウェブアプリケーションのスクリプトで使用できるAPI群を指すために使用され、実際にDocumentオブジェクトが存在することを必ずしも意味しない」<ref>[http://dev.w3.org/html5/webstorage/#terminology W3C: Web Storage draft standard]. Dev.w3.org (2004-02-05). Retrieved on 2011-06-12.</ref>。
==ウェブストレージの管理==
ウェブストレージオブジェクトの保存は現在のすべてのサポートするウェブブラウザでデフォルトで有効にされていて、ブラウザのベンダーごとに、ユーザーがウェブストレージを有効・無効にする方法、そしてウェブストレージの「キャッシュ」を消去する方法が提供されている<ref>{{cite web|url=https://mid.as/kb/article/00103|title=How to enable, disable, or clear your browser's "Web Storage" cache - MIDAS Knowledgebase|website=mid.as|accessdate=2020-01-13}}</ref>。同様にウェブストレージを制御する方法は、サードパーティーの[[ブラウザ拡張機能]]によっても可能である。ブラウザごとにウェブストレージのオブジェクトを保存する方法が次のように異なっている。
* [[Firefox]]ではウェブストレージのオブジェクトをユーザープロフィールのフォルダの <code>webappsstore.sqlite</code> という[[SQLite]]のファイル <code>webappsstore.sqlite</code> に保存する<ref>{{cite web|url=https://stackoverflow.com/questions/7079075/where-does-firefox-store-javascript-html-localstorage/|title=html5 - Where does Firefox store javascript/HTML localStorage?|website=Stack Overflow|accessdate=2020-01-13}}</ref>。
* [[Google Chrome]]はウェブストレージのデータをユーザープロフィールの[[SQLite]]ファイルに保存する。このファイルが保存されているサブフォルダは[[Microsoft Windows|Windows]]では <code>\AppData\Local\Google\Chrome\User Data\Default\Local Storage</code> であり、[[macOS]]では <code>~/Library/Application Support/Google/Chrome/Default/Local Storage</code> である<ref>{{Cite web|url=https://stackoverflow.com/questions/9669184/how-is-html5-webstorage-data-physically-stored|title=html - How is HTML5 WebStorage data physically stored?|website=Stack Overflow|access-date=2019-07-16}}</ref>。
* [[Opera]]のウェブストレージは、Operaのバージョンによって <code>\AppData\Roaming\Opera\Opera\sessions\autosave.win</code> か、あるいは <code>\AppData\Local\Opera\Opera\pstorage\</code> のいずれかに保存される<ref>{{cite web|url=https://stackoverflow.com/questions/8634058/where-the-sessionstorage-and-localstorage-stored/|title=local storage - Where the sessionStorage and localStorage stored?|website=Stack Overflow|accessdate=2020-01-13}}</ref>。
* [[Internet Explorer]]のウェブストレージは <code>\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage</code> である。
==関連項目==
*[[Indexed Database API]]
==脚注==
{{reflist|30em}}
==外部リンク==
* [http://www.w3.org/TR/webstorage/ W3C: Web Storage]
*[https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API Web Storage API] on Mozilla Developer Network
* [http://dev.opera.com/articles/view/web-storage/ Opera: Web Storage: easier, more powerful client-side data storage]
*[https://developer.blackberry.com/html5/apis/v2_2/localstorage.html Local Storage] on BlackBerry DevZone
| 