HTML5 WebStorage (HTML5 ローカル ストレージ テクノロジ)_CSS/HTML

WebStorage は、HTML5 のローカル ストレージ ソリューションの 1 つです。HTML5 で WebStorage の概念が導入される前は、IE ユーザー データ、Flash Cookie、Google Gears など、他の信頼性の低いソリューションは削除されました。これはブラウザ互換のローカル ストレージでした。解決策: Cookie のみを使用します。 Cookie ローカル ストレージがあるのに、なぜ WebStorage の概念を導入する必要があるのか​​と疑問に思う学生もいるかもしれません。

Cookie の何が問題なのか

Cookie の欠陥は非常に明白です

1. データ サイズ: ストレージ コンテナーとして、Cookie のサイズは約 4KB に制限されていますが、特に現在の複雑なビジネス ロジック要件にとっては非常に面倒です。4KB の容量には、いくつかの構成フィールドの保存に加えて、単純な単一値の情報であるため、ほとんどの開発者は何を期待すればよいのかわかりません。
2. セキュリティの問題: HTTP リクエストの Cookie はクリア テキストで渡されるため (HTTPS はそうではありません)、セキュリティの問題は依然として大きいです。
3. ネットワーク負荷: Cookie が各 HTTP リクエストに添付され、HttpRequest と HttpResponse のヘッダーで送信されるため、不必要なトラフィック損失が追加されることがわかっています。

ウェブストレージ

WebStorage は、HTML 用の新しいローカル ストレージ ソリューションの 1 つですが、Cookie を置き換えるために開発された標準ではありません。Cookie は、クライアントとサーバー間の通信を処理する HTTP プロトコルの一部として不可欠です。セッションは実装に依存します。クライアント側の状態の永続化。 WebStorage の目的は、Cookie を使用すべきではなく、Cookie を使用しなければならないローカル ストレージの問題を解決することです。
WebStorage は、localStorage と sessionStorage の 2 種類の API を提供します。この 2 つの違いは、名前を見れば大まかに理解できます。localStorage は、明示的に削除またはクリアされない限り、データを永続的にローカルに保存します。sessionStorage に保存されるデータは、セッションは一定期間有効で、ブラウザを閉じると自動的に削除されます。どちらのオブジェクトにも共通の API があります。

1. 長さ: ストレージ内のキーと値のペアの数を取得するために使用される唯一の属性 (読み取り専用)。
2. key: インデックスに基づいてストレージのキー名を取得します
3. getItem: キーに基づいてストレージ内の対応する値を取得します
4. setItem: キーと値のペアを追加しますストレージ
5.removeItem: キー名に従ってキーと値のペアを削除します
6.clear: ストレージ オブジェクトをクリアします

WebStorage の使用方法

WebStorage を実装するブラウザでは、ページには localStorage と sessionStorage という 2 つのグローバル オブジェクトがあります

localStorage を例として、簡単なオペレーション コードを見てみましょう。

イベント

HTML5 ではストレージ イベントが定義されており、WebStorage の変更が発生した際に、このビューでストレージの変更を変更できます。

index.php で定義

test.php

index.php ページのリンクをクリックして test.php にアクセスすると、index.php のコンソール出力ログが表示されます。
http://localhost/test によって userName が Byron から Casper に変更されました。 .php
true

クッキーより優れている理由

1. 容量の点では、WebStorage は通常、ブラウザに 5M のストレージ領域を提供します。これはビデオや画像を保存するには十分ではありませんが、ほとんどの操作には十分です
2. セキュリティの点では、WebStorage はHTTPヘッダーはブラウザから送信されるため、比較的安全です
3.トラフィックに関しては、WebStorageがサーバーに送信されないため、不要なトラフィックが節約され、ハイエンドユーザーにとっては依然として非常に便利ですモバイル デバイスをターゲットとした Web ページの訪問頻度。悪くありません。
これは、WebStorage が Cookie を置き換えることができるという意味ではなく、WebStorage では、Cookie が本来行うべきこと、つまりクライアントとサーバー間の対話のチャネルとして機能し、クライアントの状態を維持することしかできないということです。したがって、WebStorage はローカル ストレージ ソリューションとして Cookie よりも優れています。

注意事項

1. ブラウザの互換性。これは、すべての IE8 ブラウザがサポートしているため、すべての新しい HTML5 機能の中で実装がほぼ最も簡単です。IE7 と IE6 は実装できます。 IE ユーザーデータを使用します。

2. localStorage と sessionStorage はどちらもオブジェクトであるため、「.key」または「[key]」を通じてキーと値のペアを取得および変更することもできますが、これはお勧めできません。 コードをコピー コードは次のとおりです。 localStorage.userName='Frank'; console.log(localStorage['userName']); 3. localStorage はローカルに保存されますが、ブラウザごとにデータが個別に保存されるため、Chrome に保存されている localStorage は利用できません。ファイアフォックスで。 4. localStorage と sessionStorage は文字列型のみを保存できます。複雑なオブジェクトの場合は、ECMAScript によって提供される JSON オブジェクトの stringify と解析を使用できます。IE の以前のバージョンの場合は、json2.js を使用できます。 5.コンソールに加えて、Chrome はローカル ストレージの非常に直感的な表示方法も提供します。これはデバッグ時に非常に便利です。