Loading article…
ウェブストレージ（以前はDOMストレージ（Document Object Modelストレージ）として知られていた）は、ウェブブラウザが提供する標準的なJavaScript APIです。これにより、ウェブサイトはCookieと同様にユーザーのデバイスに永続的なデータを保存できますが、容量ははるかに大きく[ 1 ] 、 HTTPヘッダーで情報が送信されることはありません[ 2 ]。ウェブストレージには、ローカルストレージとセッションストレージという2つの主要なタイプがあり、それぞれ永続的なCookieとセッションCookieと同様の動作をします。ウェブストレージは、 World Wide Web Consortium（W3C）[ 3 ]とWHATWG [ 4 ]によって標準化されており、すべての主要なブラウザでサポートされています。
ウェブストレージは、クッキーとはいくつかの重要な点で異なります。
Cookieはサーバーとの通信を目的としており、すべてのリクエストに自動的に追加され、サーバー側とクライアント側の両方からアクセスできます。Webストレージは、クライアントサイドスクリプトの領域にのみ属します。Webストレージデータは、すべてのHTTPリクエストでサーバーに自動的に送信されるわけではなく、WebサーバーがWebストレージに直接書き込むこともできません。ただし、明示的なクライアントサイドスクリプトを使用すれば、これらの効果のいずれも実現でき、サーバーの動作を細かく調整することが可能です。
Cookieは4キロバイトに制限されています。Webストレージははるかに大きなストレージ容量を提供します。
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 ( typeof localStorage.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 ) ; // valueW3C ドラフトのタイトルは「Web Storage」です。「DOM storage」も一般的に使用されてきた名称ですが、使用頻度は減ってきています。例えば、Mozilla や Microsoft の開発者サイトの「DOM Storage」ウェブ記事は、「Web Storage」記事に置き換えられています。[ 12 ] [ 13 ] [ 14 ] [ 15 ]
DOMストレージの「DOM」は、文字通りドキュメントオブジェクトモデルを指すものではありません。W3Cによると、「DOMという用語は、Webアプリケーションのスクリプトで使用できるAPIセットを指すために使用され、実際のドキュメントオブジェクトの存在を必ずしも意味するものではありません...」[ 16 ]。
ウェブストレージオブジェクトの保存は、対応するすべてのウェブブラウザの最新バージョンでデフォルトで有効になっており、ブラウザベンダーはユーザーがウェブストレージをネイティブに有効または無効にしたり、ウェブストレージの「キャッシュ」をクリアしたりする方法を提供しています。同様のウェブストレージ制御は、サードパーティのブラウザ拡張機能からも利用できます。各ブラウザは、ウェブストレージオブジェクトを異なる方法で保存します。
webappsstore.sqlite\AppData\Local\Google\Chrome\User Data\Default\Local Storageでは " " 、macOSでは " "です。~/Library/Application Support/Google/Chrome/Default/Local Storage\AppData\Roaming\Opera\Opera\sessions\autosave.win」または「 」のいずれかにあります。\AppData\Local\Opera\Opera\pstorage\\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage" です。LocalStorageのWebストレージは、隠しフォルダ内の「 」というラベルの付いたフォルダにありますsafari。[ 18 ]ウィンドウオブジェクトのlocalStorageプロパティとsessionStorageプロパティを使用してアクセスできるWebストレージは、すべてのブラウザで最大10 MiBのデータに制限されています。ブラウザは、オリジンごとに最大5 MiBのローカルストレージと5 MiBのセッションストレージを保存できます。