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 があります。

コードをコピー コードは次のとおりです。

インターフェイス ストレージ {
読み取り専用属性unsigned long length ;
DOMString? key(unsigned long Index);
getter DOMString getItem(DOMString key);
setter Creator void setItem(DOMString key, DOMString value);
deleter void deleteItem(DOMString) key);
void clear();
};

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

WebStorage の使用方法

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

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

コードをコピー コードは次のとおりです。

var ls=localStorage;
console.log(ls.length);//0
ls.setItem('name','Byron' );
ls.setItem('age','24');
console.log(ls.length);//2

//遍历localStorage
for(var i =0;i /*
年齢 : 24
名前 : バイロン
*/
var key=ls.key(i);
コンソール。 log(key ' : ' ls.getItem(key));
}

ls.removeItem('age');


for(var i=0;i /*
名前 : バイロン
*/
var key=ls.key(i);
コンソール。 log(key ' : ' ls.getItem( key));
}
ls.clear();//0
console.log(ls.length);

イベント

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

复制代代码如下:

インターフェイス StorageEvent: イベント {
読み取り専用属性 DOMString キー;
読み取り専用属性 DOMString? oldValue;
読み取り専用属性 DOMString? newValue;
readonly 属性 DOMString url;
readonly 属性 Storage? storageArea;
};

1. key: キーと値のペアのキー
2. oldValue: 値変更前
3. newValue: 変更された値
4. url: 変更をトリガーしたページの URL
5. StorageArea: 変更されたストレージ

index.php で定義

コードをコピー コードは次のとおりです。

Test

コードをコピー コードは次のとおりです。

window.addEventListener('storage', function(e ; BR> },false);
localStorage.setItem('userName','Byron');

test.php

コードをコピー コードは次のとおりです:

localStorage。 setItem(' userName','Casper');

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 はローカル ストレージの非常に直感的な表示方法も提供します。これはデバッグ時に非常に便利です。