HTML5-Webストレージ

HTML5では、HTTPセッションCookieと同様に、構造化データをクライアント側に保存し、次の欠点を克服するための2つのメカニズムが導入されています。

CookieはすべてのHTTPリクエストに含まれているため、同じデータを送信することでWebアプリケーションの速度が低下します。
CookieはすべてのHTTPリクエストに含まれているため、暗号化されていないデータがインターネット経由で送信されます。
Cookieは約4KBのデータに制限されています。必要なデータを保存するには不十分です。

2つのストレージは session storage そして local storage そして、それらはさまざまな状況を処理するために使用されます。

ほぼすべてのブラウザの最新バージョンは、インターネットエクスプローラを含むHTML5ストレージをサポートしています。

セッションストレージ

セッションストレージは、ユーザーが単一のトランザクションを行っているシナリオのために設計されていますが、同時に異なるウィンドウで複数のトランザクションを実行することができます。

例

たとえば、ユーザーが同じサイトを使用して2つの異なるウィンドウで飛行機のチケットを購入したとします。サイトがCookieを使用してユーザーが購入したチケットを追跡している場合、ユーザーが両方のウィンドウでページからページへクリックすると、現在購入されているチケットが一方のウィンドウからもう一方のウィンドウに「リーク」し、ユーザーが気付かずに同じフライトのチケットを2枚購入します。

HTML5では、サイトがセッションストレージにデータを追加するために使用するsessionStorage属性が導入されており、そのウィンドウで開いた同じサイトの任意のページからアクセスできます。session ウィンドウを閉じるとすぐに、セッションは失われます。

以下は、セッション変数を設定し、その変数にアクセスするコードです。

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

これにより、次の結果が生成されます-

ローカルストレージ

ローカルストレージは、複数のウィンドウをまたがるストレージ用に設計されており、現在のセッションを超えて持続しています。特に、Webアプリケーションは、パフォーマンス上の理由から、ユーザーが作成したドキュメント全体やユーザーのメールボックスなど、メガバイト単位のユーザーデータをクライアント側に保存したい場合があります。

繰り返しになりますが、Cookieはリクエストごとに送信されるため、このケースを適切に処理しません。

例

HTML5では、時間制限なしでページのローカルストレージ領域にアクセスするために使用されるlocalStorage属性が導入されており、このローカルストレージはそのページを使用するときはいつでも利用できます。

以下は、ローカルストレージ変数を設定し、このページにアクセスするたびに、次にウィンドウを開いたときにも、その変数にアクセスするコードです。

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

これにより、次の結果が生成されます-

Webストレージを削除する

機密データをローカルマシンに保存すると危険であり、セキュリティホールが残る可能性があります。

セッションストレージのデータは、セッションが終了します直後にブラウザによって削除されるだろう。

ローカルストレージ設定をクリアするには、電話する必要があります localStorage.remove('key'); ここで、「key」は削除する値のキーです。すべての設定をクリアしたい場合は、電話する必要がありますlocalStorage.clear() 方法。

以下は、完全なローカルストレージをクリアするコードです-

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

これにより、次の結果が生成されます-