ウェブストレージ

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

特徴

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

目的

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

ストレージサイズ

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

Opera 10.50以降では5MBまで可能^[1]
Safari 8では5MBまで可能^[5]
Firefox 34では10MBまで許可される^[5] （以前は2007年では1オリジンあたり5MB ^[6]）
Google Chromeでは、オリジンごとに10MBまで許可されています（以前はオリジンごとに5MB）^[7]
Internet Explorerでは、ストレージ領域ごとに10MBの容量が許可されます^[8]

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

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

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

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

使用法

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

// セッションの期間中、ブラウザに値を保存します
sessionStorage . setItem ( 'key' , 'value' ); 

// 値を取得します (ブラウザを閉じて再度開くと削除されます) ... 
alert ( sessionStorage . getItem ( 'key' ));

// セッションの期間を超えてブラウザに値を保存します
localStorage . setItem ( 'key' , 'value' ); 

// 値を取得します (ブラウザを閉じて再度開いた後も保持されます) 
alert ( localStorage . getItem ( 'key' ));

Storage APIを介して保存できるのは文字列のみです。^[10]異なるデータ型を保存しようとすると、ほとんどのブラウザでは自動的に文字列に変換されます。ただし、 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 ); // value

命名法

W3C のドラフトは「Web Storage」と題されている。「DOM storage」も一般的に使用される名前だが、あまり使用されなくなってきている。たとえば、Mozilla や Microsoft の開発者サイトの「DOM Storage」ウェブ記事は「Web Storage」記事に置き換えられている。^[11]^[12]^[13]^[14]

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