ウェブストレージ

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. 2011年6月4日時点のオリジナルよりアーカイブ。2011年6月12日閲覧。
  12. ^ “Web Storage API”. Mozilla Developer Network. 2017年6月28日閲覧。
  13. ^ “Introduction to DOM Storage”. Microsoft Developer Network. 2011年6月8日時点のオリジナルよりアーカイブ。2011年6月12日閲覧。
  14. ^ “Introduction to Web Storage”. Microsoft Developer Network. 2017年6月28日閲覧。
  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勧告