コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

「ウェブストレージ」の版間の差分

出典: フリー百科事典『ウィキペディア（Wikipedia）』
履歴の双方向閲覧
← 古い編集新しい編集 →
削除された内容 追加された内容
ビジュアルウィキテキスト
カテゴリの整理
Cewbot (会話 | 投稿記録)
ボット
786,068 回編集
m Bot作業依頼: sourceタグをsyntaxhighlightタグに置換 (Category:非推奨のsourceタグを使用しているページ) - log
20行目: 20行目:
==使用法==
==使用法==
ウェブストレージをサポートするブラウザはwindowレベルで宣言される <code>sessionStorage</code> と <code>localStorage</code> というグローバールオブジェクトを持っている。以下の[[JavaScript]]コードによって、これらのブラウザでウェブストレージを動作させることができる。
ウェブストレージをサポートするブラウザはwindowレベルで宣言される <code>sessionStorage</code> と <code>localStorage</code> というグローバールオブジェクトを持っている。以下の[[JavaScript]]コードによって、これらのブラウザでウェブストレージを動作させることができる。
<source lang="javascript">
<syntaxhighlight lang="javascript">
// セッション期限に限ってブラウザに値を保存する
// セッション期限に限ってブラウザに値を保存する
sessionStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
32行目: 32行目:
// 値を得る (ブラウザを閉じて再度開いても継続する)
// 値を得る (ブラウザを閉じて再度開いても継続する)
alert(localStorage.getItem('key'));
alert(localStorage.getItem('key'));
</syntaxhighlight>
</source>


ストレージのAPIでは文字列のみ保存できる<ref>W3C, 2011 http://dev.w3.org/html5/webstorage/</ref>。他のデータ型を保存しようとすれば、多くのブラウザでは自動的に文字列に変換される。しかし、[[JavaScript Object Notation|JSON]]に変換すれば、JavaScriptのオブジェクトを効率的に保存することができる。
ストレージのAPIでは文字列のみ保存できる<ref>W3C, 2011 http://dev.w3.org/html5/webstorage/</ref>。他のデータ型を保存しようとすれば、多くのブラウザでは自動的に文字列に変換される。しかし、[[JavaScript Object Notation|JSON]]に変換すれば、JavaScriptのオブジェクトを効率的に保存することができる。
<source lang="javascript">
<syntaxhighlight lang="javascript">
// 文字列のかわりにオブジェクトを保存する
// 文字列のかわりにオブジェクトを保存する
localStorage.setItem('key', {name: 'value'});
localStorage.setItem('key', {name: 'value'});
47行目: 47行目:
localStorage.setItem('key', JSON.stringify({name: 'value'}));
localStorage.setItem('key', JSON.stringify({name: 'value'}));
alert(JSON.parse(localStorage.getItem('key')).name); // value
alert(JSON.parse(localStorage.getItem('key')).name); // value
</syntaxhighlight>
</source>


==名称==
==名称==

2020年7月5日 (日) 23:11時点における版

HTML
各種項目
比較

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

特徴

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

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

関連項目

脚注

  1. ^ Opera Web Storage, 2011 http://dev.opera.com/articles/view/web-storage/
  2. ^ AndyHume.net, 2011 http://blog.andyhume.net/localstorage-is-not-cookies
  3. ^ Web Storage. W3.org. Retrieved on 2011-06-12.
  4. ^ HTML Living Standard 11 Web storage
  5. ^ John Resig: DOM Storage. John Resig, ejohn.org. Retrieved on 2011-06-12.
  6. ^ “Issue 21680002: Up the window.localstorage limit to 10M from 5M. - Code Review”. chromiumcodereview.appspot.com. 2020年1月13日閲覧。
  7. ^ Introduction to Web Storage. Microsoft Developer Network, msdn.microsoft.com. Retrieved on 2014-08-05.
  8. ^ W3C: HTML Living Standard. (2020-01-09). Retrieved on 2020-01-13.
  9. ^ W3C: Indexed Database API. W3C. Retrieved on 2012-02-12.
  10. ^ W3C, 2011 http://dev.w3.org/html5/webstorage/
  11. ^ “DOM Storage”. Mozilla Developer Network. June 4, 2011時点のオリジナルよりアーカイブ。2011年6月12日閲覧。
  12. ^ “Web Storage API”. Mozilla Developer Network. June 28, 2017閲覧。
  13. ^ “Introduction to DOM Storage”. Microsoft Developer Network. June 8, 2011時点のオリジナルよりアーカイブ。2011年6月12日閲覧。
  14. ^ “Introduction to Web Storage”. Microsoft Developer Network. June 28, 2017閲覧。
  15. ^ W3C: Web Storage draft standard. Dev.w3.org (2004-02-05). Retrieved on 2011-06-12.
  16. ^ “How to enable, disable, or clear your browser's "Web Storage" cache - MIDAS Knowledgebase”. mid.as. 2020年1月13日閲覧。
  17. ^ “html5 - Where does Firefox store javascript/HTML localStorage?”. Stack Overflow. 2020年1月13日閲覧。
  18. ^ “html - How is HTML5 WebStorage data physically stored?”. Stack Overflow. 2019年7月16日閲覧。
  19. ^ “local storage - Where the sessionStorage and localStorage stored?”. Stack Overflow. 2020年1月13日閲覧。

外部リンク

W3C標準
製品・標準
推奨
勧告候補
作業草稿
覚書
方針
発案
廃止
団体
ソフトウェア
関連会議
カテゴリ Category:W3C勧告
「https://ja-two.iwiki.icu/w/index.php?title=ウェブストレージ&oldid=78331891」から取得