ウェブストレージ

ウェブストレージは、以前はDOMストレージ（ドキュメントオブジェクトモデルストレージ）と呼ばれていましたが、ウェブブラウザが提供する標準のJavaScript APIです。これにより、ウェブサイトはクッキーと同様にユーザーのデバイスに永続的なデータを保存できますが、容量ははるかに大きく[ 1 ] 、 HTTPヘッダーで情報が送信されることはありません[ 2 ]。ウェブストレージには主にローカルストレージとセッションストレージの2種類があり、それぞれ永続クッキーとセッションクッキーと同様に動作します。ウェブストレージは、ワールドワイドウェブコンソーシアム（W3C）[ 3 ]とWHATWG [ 4 ]によって標準化されており、すべての主要ブラウザでサポートされています。

特徴

Web ストレージは、いくつかの重要な点で Cookie と異なります。

目的

Cookieはサーバーとの通信を目的としており、すべてのリクエストに自動的に追加され、サーバー側とクライアント側の両方からアクセスできます。Webストレージは、クライアント側スクリプティングの範疇にのみ属します。Webストレージのデータは、すべてのHTTPリクエストで自動的にサーバーに送信されるわけではなく、WebサーバーはWebストレージに直接書き込むことはできません。しかし、これらの効果はいずれも、明示的なクライアント側スクリプトによって実現でき、サーバーの望ましいインタラクションを微調整することができます。

ストレージサイズ

クッキーは4キロバイトに制限されています。ウェブストレージははるかに大きなストレージ容量を提供します。

ローカルおよびセッションストレージ

Web ストレージには、ローカル ストレージとセッション ストレージという 2 つの異なるストレージ領域があり、スコープと有効期間が異なります。ローカル ストレージに格納されるデータは、同一オリジン ポリシーで定義されているプロトコル、ホスト名、ポート番号の組み合わせであるオリジンごとに保存されます。データは、以前にデータを保存した同じオリジンのページから読み込まれたすべてのスクリプトで利用可能であり、ブラウザーを閉じた後も保持されます。そのため、Web ストレージは、RFC  6265 のセクション 8.5 と 8.6 で説明されている Cookie の弱い整合性と弱い機密性の問題の影響を受けません。セッション ストレージは、オリジンごと、およびインスタンスごと (ウィンドウごとまたはタブごと) の両方で、インスタンスの有効期間に制限されます。セッション ストレージは、同じ Web アプリの別々のインスタンスを異なるウィンドウで互いに干渉することなく実行できるようにするためのものですが、これは Cookie では十分にサポートされていないユース ケースです。[ 10 ]

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

Web ストレージは、キーと値が両方とも文字列である連想配列データ モデルを公開するため、Cookie よりも優れたプログラム インターフェイスを提供します。

使用法

sessionStorageウェブストレージをサポートするブラウザには、localStorageウィンドウレベルで宣言されたグローバルオブジェクトがあります。これらのブラウザでは、以下のJavaScriptコードを使用してウェブストレージの動作を開始できます。 

//セッションの期間中、ブラウザに値を保存します。sessionStorage.setItem ( " key" 、"value" );// 値を取得します (ブラウザを閉じて再度開くと削除されます) ... alert ( sessionStorage . getItem ( "key" ));// セッションの期間を超えてブラウザに値を保存します。localStorage.setItem ( " key " 、"value" );// 値を取得します (ブラウザを閉じて再度開いた後も保持されます) alert ( localStorage . getItem ( "key" ));

Storage API経由で保存できるのは文字列のみです。[ 11 ]異なるデータ型を保存しようとすると、ほとんどのブラウザでは自動的に文字列に変換されます。しかし、 JSONへの変換により、JavaScriptオブジェクトを効率的に保存できます。 

// 文字列の代わりにオブジェクトを保存しますlocalStorage.setItem ( " key" , { name : " value" }); alert ( typeoflocalStorage.getItem ( ' key' ) ); // 文字列//文字列ではなく整数を保存しますlocalStorage.setItem ( " key" , 1 ); alert ( typeof localStorage.getItem ( " key" )); // 文字列// 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」に置き換えられています。[ 12 ] [ 13 ] [ 14 ] [ 15 ]

DOMストレージにおける「DOM」は、文字通りドキュメントオブジェクトモデルを指すものではありません。W3Cによると、「DOMという用語は、Webアプリケーションのスクリプトで利用可能なAPIセットを指すために使用され、必ずしも実際のドキュメントオブジェクトの存在を意味するものではありません…」[ 16 ]

ウェブストレージ管理

ウェブストレージオブジェクトの保存は、対応するすべてのウェブブラウザの現在のバージョンでデフォルトで有効になっています。ブラウザベンダーは、ユーザーがウェブストレージをネイティブに有効化または無効化したり、ウェブストレージの「キャッシュ」を消去したりする方法を提供しています。同様のウェブストレージ制御は、サードパーティ製のブラウザ拡張機能でも利用できます。各ブラウザはウェブストレージオブジェクトの保存方法が異なります。

参照

参考文献

  1. ^ a b Dixit, Shwetank (2013年3月5日). 「Web Storage: より簡単で強力なクライアントサイドデータストレージ」 . Dev.Opera . 2021年5月14日閲覧。
  2. ^ Hume, Andy (2011年3月24日). 「localStorageはCookieではない」 . andyhume.net . 2011年6月2日時点のオリジナルよりアーカイブ。2021年5月14日閲覧。
  3. ^ Hickson, Ian編 (2021年1月28日). 「Web Storage (Second Edition)」 . W3C . Web Platform Working Group . 2021年5月14日閲覧。
  4. ^ WHATWG. 「HTML標準 § 12 Webストレージ」 . html.spec.whatwg.org . 2021年5月14日閲覧。
  5. ^北村英治 (2014年1月28日). 「モバイルブラウザにおけるクォータの活用：ブラウザストレージに関する調査レポート - HTML5 Rocks」 . 2014年2月1日時点のオリジナルよりアーカイブ。 2021年5月4日閲覧。
  6. ^ 「ストレージクォータと削除基準 - Web API | MDN」 . developer.mozilla.org . 2025年3月13日. 2025年4月28日閲覧。window オブジェクトの localStorage プロパティと sessionStorage プロパティを使用してアクセスできるWebストレージは、すべてのブラウザで最大10MiBのデータに制限されています。ブラウザは、オリジンごとに最大5MiBのローカルストレージと5MiBのセッションストレージを保存できます。
  7. ^ John Resig: DOM Storage . John Resig, ejohn.org . 2011年6月12日閲覧。
  8. ^ michaeln (2013年3月8日). 「Issue 21680002: window.localstorage の制限を5MBから10MBに引き上げました。 - コードレビュー」 . Chromium Code Reviews . 2021年5月14日閲覧。
  9. ^ Microsoft (2016-10-20). 「Webストレージの概要」 . Microsoft Docs . Microsoft . 2021年5月14日閲覧。
  10. ^ W3C: Web Storage draft standard Archived 2011-02-01 at the Wayback Machine . Dev.w3.org (2004-02-05). 2011-06-12 取得.
  11. ^ W3C, 2011 http://dev.w3.org/html5/webstorage/ 2011年2月1日アーカイブ、 Wayback Machine
  12. ^ 「DOMストレージ」。Mozilla Developer Network。2011年6月4日時点のオリジナルよりアーカイブ。 2011年6月12日閲覧。
  13. ^ 「Web Storage API」 . Mozilla Developer Network . 2017年6月28日閲覧。
  14. ^ 「DOMストレージ入門」。Microsoft Developer Network。2011年6月8日時点のオリジナルよりアーカイブ。 2011年6月12日閲覧。
  15. ^ 「Webストレージ入門」 . Microsoft Developer Network . 2017年6月28日閲覧。
  16. ^ W3C: Web Storage draft standard Archived 2011-02-01 at the Wayback Machine . Dev.w3.org (2004-02-05). 2011-06-12 取得.
  17. ^ Webappsstore.sqlite kb.mozillazine.org
  18. ^ Safariのウェブデータはどこに保存されますか？ discussions.apple.com. 2022年10月6日閲覧
「 https://en.wikipedia.org/w/index.php?title=Web_storage&oldid=1317161538」から取得