「利用者:Katsutoshi Seki/sandbox」の版間の差分
Katsutoshi Seki (会話 | 投稿記録) |
Katsutoshi Seki (会話 | 投稿記録) |
||
66行目: | 66行目: | ||
* [[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>。 |
* [[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]] のウェブストレージは、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]] |
* [[Internet Explorer]]のウェブストレージは <code>\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage</code> である。 |
||
==関連項目== |
==関連項目== |
2020年1月12日 (日) 22:17時点における版
https://en.wikipedia.org/wiki/Web_storage
en:Web storage (04:06, 19 September 2019) の翻訳
ウェブストレージは、DOMストレージ (Document Object Modelストレージ)と呼ばれることもあり、ウェブアプリケーションにクライアント側のデータを保存する方法とプロトコルを提供する。ウェブストレージは永続性のあるデータストレージをサポートするという点で HTTP cookie(クッキー)と似ているが、容量が拡大され[1]、HTTP request headerに情報が保存されなくなった[2]。ウェブストレージにはローカルストレージとセッションストレージという2つの主なタイプがあり、それぞれpersistent cookieと session cookieと同様にふるまう。ウェブストレージはWorld Wide Web Consortium によって標準化されていて[3]、すべての主要なブラウザーにサポートされている。
特徴
ウェブストレージはクッキーといくつかの点で異なる。
- 目的
- クッキーはサーバーとの通信を目的としているため、すべてのリクエストに自動的に加えられ、サーバーとクライアント側の双方からアクセス可能である。ウェブストレージはクライアントサイドスクリプティングのみに限定される。ウェブストレージのデータはHTTPのリクエストごとにサーバーに自動的に送信されるわけではなく、またウェブサーバーがウェブストレージに直接書き込むことはできない。 ただし、クライアント側でこれらの効果を実現するようなスクリプトを明示的に書くことは可能であり、クライアント側からはサーバーと望み通りの通信ができるような細かい制御が実現できる。
- ストレージの大きさ
- クッキーは4 KBに制限される。ウェブストレージの容量はそれよりもはるかに大きい。
- Mozilla Firefox はオリジンごとに5 MBの容量がある[4]。
- Google Chromeはオリジンごとに10 MB の容量がある[5]。
- Internet Explorerはストレージエリアごとに 10 MB の容量がある[6]。
- ローカルストレージとセッションストレージ
- ウェブストレージには、ローカルストレージとセッションストレージの2つの異なるストレージエリアがあり、有効範囲(スコープ)と有効期限が異なる。 ローカルストレージに保存されるデータの有効範囲は、 同一生成元ポリシーで規定されているように、同じプロトコル、ホスト名、およびポート番号の組み合わせごとである。 データは、以前にデータを保存した同じオリジンのページから読み込まれたすべてのスクリプトから利用でき、ブラウザが閉じられた後も保存される。 そのため、ウェブストレージにはRFC 6265のセクション8.5および8.6に書かれているクッキーの弱い完全性および弱い機密性のような問題がない。セッションストレージの有効範囲は、オリジンごとであって、さらにインスタンスごと(ウィンドウごとまたはタブごと)であり、インスタンスの有効期限に限定される。 セッションストレージは、同じウェブアプリケーションの異なるインスタンスが互いに干渉することなく異なるウィンドウで実行できるように設計されている。これはクッキーで十分にサポートされていない利用法である[7]。
- インターフェイスとデータモデル
- ウェブストレージは、キーと値の両方が文字列である連想配列データモデルを採用しているため、クッキーよりも優れたプログラムのインターフェイスが提供されている。 データモデルにアクセスするための追加のAPIが、W3C Webアプリケーションワーキンググループによって検討されている[8]。
使用法
ウェブストレージをサポートするブラウザは window レベルで宣言される sessionStorage
と localStorage
というグローバールオブジェクトを持っている。以下の JavaScript コードによって、これらのブラウザでウェブストレージを動作させることができる。
// セッション期限に限ってブラウザに値を保存する
sessionStorage.setItem('key', 'value');
// 値を得る (ブラウザを閉じて再度開くと消去される)
alert(sessionStorage.getItem('key'));
// セッション期間を超えてブラウザに値を保存する
localStorage.setItem('key', 'value');
// 値を得る (ブラウザを閉じて再度開いても継続する)
alert(localStorage.getItem('key'));
ストレージのAPIでは文字列のみ保存できる[9]。他のデータ型を保存しようとすれば、多くのブラウザでは自動的に文字列に変換される。しかし、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 の記事に書き換えられた[10][11][12][13]。
DOMストレージの「DOM」は、文字通り Document Object Model を意味しない。 W3Cによれば、「DOMという用語は、ウェブアプリケーションのスクリプトで使用できるAPI群を指すために使用され、実際に Document オブジェクトが存在することを必ずしも意味しない」[14]。
ウェブストレージの管理
ウェブストレージオブジェクトの保存は現在のすべてのサポートするウェブブラウザでデフォルトで有効にされていて、ブラウザのベンダーによって、ユーザーがウェブストレージを有効にしたり無効にしたりすること、あるいはウェブストレージの「キャッシュ」を消去する方法が提供されている[15]。同様のウェブストレージを制御する方法は、サードパーティーのブラウザ拡張機能によっても可能である。ブラウザごとにウェブストレージのオブジェクトを保存する方法が次のように異なっている。
- Firefox ではウェブストレージのオブジェクトをユーザープロフィールのフォルダの
webappsstore.sqlite
というSQLite のファイルwebappsstore.sqlite
に保存する[16]。
- Google Chrome はウェブストレージのデータをユーザープロフィールの SQLite ファイルに保存する。このファイルが保存されているサブフォルダは Windows では
\AppData\Local\Google\Chrome\User Data\Default\Local Storage
であり、macOS では~/Library/Application Support/Google/Chrome/Default/Local Storage
である[17]。
- Opera のウェブストレージは、Opera のバージョンによって
\AppData\Roaming\Opera\Opera\sessions\autosave.win
か、あるいは\AppData\Local\Opera\Opera\pstorage\
のいずれかに保存される[18]。
- Internet Explorerのウェブストレージは
\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage
である。
関連項目
脚注
- ^ Opera Web Storage, 2011 http://dev.opera.com/articles/view/web-storage/
- ^ AndyHume.net, 2011 http://blog.andyhume.net/localstorage-is-not-cookies
- ^ Web Storage. W3.org. Retrieved on 2011-06-12.
- ^ John Resig: DOM Storage. John Resig, ejohn.org. Retrieved on 2011-06-12.
- ^ “Issue 21680002: Up the window.localstorage limit to 10M from 5M. - Code Review”. chromiumcodereview.appspot.com. 2020年1月13日閲覧。
- ^ Introduction to Web Storage. Microsoft Developer Network, msdn.microsoft.com. Retrieved on 2014-08-05.
- ^ W3C: HTML Living Standard. (2020-01-09). Retrieved on 2020-01-13.
- ^ W3C: Indexed Database API. W3C. Retrieved on 2012-02-12.
- ^ W3C, 2011 http://dev.w3.org/html5/webstorage/
- ^ “DOM Storage”. Mozilla Developer Network. 2011年6月4日時点のオリジナルよりアーカイブ。2011年6月12日閲覧。
- ^ “Web Storage API”. Mozilla Developer Network. 2017年6月28日閲覧。
- ^ “Introduction to DOM Storage”. Microsoft Developer Network. 2011年6月8日時点のオリジナルよりアーカイブ。2011年6月12日閲覧。
- ^ “Introduction to Web Storage”. Microsoft Developer Network. 2017年6月28日閲覧。
- ^ W3C: Web Storage draft standard. Dev.w3.org (2004-02-05). Retrieved on 2011-06-12.
- ^ “How to enable, disable, or clear your browser's "Web Storage" cache - MIDAS Knowledgebase”. mid.as. 2020年1月13日閲覧。
- ^ “html5 - Where does Firefox store javascript/HTML localStorage?”. Stack Overflow. 2020年1月13日閲覧。
- ^ “html - How is HTML5 WebStorage data physically stored?”. Stack Overflow. 2019年7月16日閲覧。
- ^ “local storage - Where the sessionStorage and localStorage stored?”. Stack Overflow. 2020年1月13日閲覧。
外部リンク
- 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