HTMl5のストレージメソッドsessionStorageとlocalStorageの詳細説明

この記事では、HTMl5 のストレージ メソッド sessionStorage と localStorage について詳しく説明します。必要な方は、これを参照してください。ローカルストレージ。 sessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータには同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。 したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。 LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。

1. Web ストレージと Cookie の違い
Web ストレージの概念は Cookie と似ていますが、異なる点は、大容量のストレージ用に設計されているという点です。 Cookie のサイズは制限されており、新しいページをリクエストするたびに Cookie が送信されるため、帯域幅が浪費されます。また、Cookie はスコープを指定する必要があり、ドメイン間で呼び出すことはできません。
さらに、Web Storage には setItem、getItem、removeItem、clear などのメソッドがあります。Cookie とは異なり、フロントエンド開発者は setCookie と getCookie を自分でカプセル化する必要があります。 しかし、Cookie も不可欠です。Cookie はサーバーと対話するために使用され、HTTP 仕様の一部として存在しますが、Web Storage はデータをローカルに「保存」するためにのみ作成されます (@otakustay からの訂正)

2. html5 のブラウザーのサポートWeb ストレージ
IE 7 以下を除き、他の標準ブラウザーはこれを完全にサポートしています (IE と FF は Web サーバーで実行する必要があります)。たとえば、IE7 と IE6 の UserData は常に良いことです。これは実際には JavaScript ローカル ストレージのソリューションです。単純なコードのカプセル化により、すべてのブラウザを統合して Web ストレージをサポートできます。
ブラウザが localStorage をサポートしているかどうかを確認するには、次のコードを使用できます:

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

if(window.localStorage){
    alert("浏览支持localStorage") 
}
else
{    
    alert("浏览暂不支持localStorage") 
} 
//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }

3. LocalStorage と sessionStorage の操作
localStorage と sessionStorage の両方sessionStorage には、setItem、getItem、removeItem などの同じ操作メソッドがあります。
localStorage と sessionStorage のメソッド: setItem は値を格納します
目的: 値をキーフィールドに格納します
使用法: .setItem(key, value)
コード例:

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

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItemは値を取得します

目的:指定されたキーに対してローカルに保存されている値を取得します

使用法:.getItem(key)
コード例:

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

var value = sessionStorage.getItem("key");  
var site = localStorage.getItem("site");

removeItem はキーを削除します

目的: 指定されたキーに対してローカルに保存されている値を削除します

使用法: .removeItem(key)
コード例:

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

sessionStorage.removeItem("key");  
localStorage.removeItem("site");

clear すべてのキー/値をクリアします

目的: すべてのキー/値をクリアします

使用法: .clear()
コード例:

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

sessionStorage.clear();  
localStorage.clear();

4. 他の操作メソッド: ポイント操作と []

Web Storage は、便利なアクセスのために独自の setItem、getItem などを使用できるだけでなく、ドット (.) も使用できます。演算子と [] を使用して、次のコードのように通常のオブジェクトのようにデータを保存します:

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

var storage = window.localStorage; storage.key1 = "hello"; 
storage["key2"] = "world"; 
console.log(storage.key1); 
console.log(storage["key2"]);

5. localStorage と sessionStorage の key 属性と length 属性はトラバーサルを実装します。

sessionStorage と localStorage によって提供される key() と length は、次のコードのような保存されたデータのトラバーサルを簡単に実装できます。
Storage は、キー値が変更されるかクリアされると、ストレージ イベントをトリガーすることもできます。たとえば、次のコードはストレージ イベント変更のリスナーを追加します:

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

var storage = window.localStorage; 
for (var i=0, len = storage.length; i  <  len; i++)
{
    var key = storage.key(i);     
    var value = storage.getItem(key);     
    console.log(key + "=" + value); 
}

ストレージ イベント オブジェクトの特定の属性は次のとおりです:

プロパティ	タイプ	説明
key	String	追加、削除、または変更された名前付きキー
oldValue	Any	以前の値(現在は上書きされています) 、新しい項目が追加された場合は null
newValue	Any	新しい値、または項目が追加された場合は null
url/uri	String	トリガーしたメソッドを呼び出したページこの変更

関連する推奨事項:

すべての HTML5 タグの概要とタグの意味の説明

以上がHTMl5のストレージメソッドsessionStorageとlocalStorageの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。