HTML5-Webストレージ

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

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

2つのストレージは、*セッションストレージ*および*ローカルストレージ*であり、異なる状況を処理するために使用されます。

ほとんどすべてのブラウザーの最新バージョンは、Internet Explorerを含むHTML5ストレージをサポートしています。

セッションストレージ

_Session Storage_は、ユーザーが単一のトランザクションを実行するシナリオ用に設計されていますが、異なるウィンドウで複数のトランザクションを同時に実行できます。

例

たとえば、ユーザーが同じサイトを使用して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>

これは、次の結果を生成します-

ローカルストレージ

_Local Storage_は、複数のウィンドウにまたがるストレージ用に設計されており、現在のセッションを超えて持続します。特に、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ストレージを削除する

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

_Session Storage Data_は、セッションが終了した直後にブラウザーによって削除されます。

ローカルストレージ設定をクリアするには、* localStorage.remove（ '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>

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

Html5-web-storage

目次

HTML5-Webストレージ

セッションストレージ

例

ローカルストレージ

例

Webストレージを削除する