html5のsessionStorageとlocalStorageの詳しい解説と使い方

html5 の Web ストレージには、sessionStorage と localStorage という 2 つのストレージ メソッドが含まれています。

sessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータは、同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。

LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。

Web ストレージと Cookie の違い

Web ストレージの概念は Cookie に似ていますが、異なる点は、より大容量のストレージ用に設計されているという点です。 Cookie のサイズは制限されており、新しいページをリクエストするたびに Cookie が送信されるため、帯域幅が無駄に使用されます。また、Cookie はスコープを指定する必要があり、ドメイン間で呼び出すことはできません。

さらに、Web Storage には setItem、getItem、removeItem、clear などのメソッドがあります。Cookie とは異なり、フロントエンド開発者は setCookie と getCookie を自分でカプセル化する必要があります。

しかし、Cookie も不可欠です。Cookie はサーバーと対話するために使用され、HTTP 仕様の一部として存在しますが、Web ストレージはデータをローカルに「保存」するためにのみ作成されます (@otakustay からの訂正)

html5 Web ストレージ ブラウザのサポート

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

ブラウザが localStorage をサポートしているかどうかを確認するには、次のコードを使用できます:

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

localStorage と sessionStorage の操作

localStorage と 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 delete key

目的: 指定されたキーに対してローカルに保存されている値を削除する
使用法: .removeItem(key)
コード例:

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

clear すべてのキーをクリア/values

目的: すべてのキー/値をクリア
使用法: .clear()
コード例:

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

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

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

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

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

sessionStorage と localStorage によって提供される key() と length は便利です。次のコードのように、ストアド データ トラバーサルを実装します。たとえば、次のコードはストレージ イベントを追加します。 イベント変更の監視:

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 文字列 追加または削除された名前付きキー。 、または変更された

oldValue Any 以前の値 (上書きされている)、または新しい項目が追加された場合は null

newValue Any 新しい値、または項目が追加された場合は null

url/uri String : Storage Web Storage の例