H 5ローカルストレージ:sessionStorageとlocalStorage

作者:心叶时间:2018-05-01 18:30
H 5は2つの非常に使いやすいローカルストレージ方法を提供しています:sessionStorageとlocalStorage、以下はそれぞれ紹介します:
1.sessionStorage:保存されているのは1つのセッションのデータです.つまり、1回のセッションでのみ有効で、閉じるとデータが破棄され、永続的なローカルデータストレージではなく、1つのセッションのストレージです.
2.localStorage:ローカルデータ永続化ストレージは、操作上は第1種と変わらないが、ストレージ時間が異なる.
ステップ1:基本操作.
1.valueをkeyフィールドに格納する:.setItem( key, value).

sessionStorage.setItem("key", "value");

localStorage.setItem("key", "value");

2.指定キーのローカル格納値を取得する:.getItem(key).

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

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

3.指定キーのローカル格納値を削除する:.removeItem( key).

sessionStorage.removeItem("key");

localStorage.removeItem("key");

4.すべてのkey/valueをクリア:.clear().

sessionStorage.clear();

localStorage.clear();

ステップ2:その他の操作.
storageは、上記の方法でデータを取得および格納するほか、通常のオブジェクトと同様に、ポイント操作および[]を使用してデータを制御することもできます(localStorageを例に挙げます).

var storage = window.localStorage;

storage.info='       ';

//  []    
var infoValue=storage['info'];

storageの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);

}

ステップ3:storageイベント(localStorage用).
localStorageでは、キー値が変更またはclearされたときにstorageイベントをトリガーできます(storageの登録と変更値はドメインを越えずに2つのページに存在します).次の例のように、storageイベントをトリガーできます.

//  A.html   js  （      ，           ）
window.addEventListener("storage", function (event) {

    alert(event.newValue);
    
});

//  B.html   js  
localStorage.clear();

localStorage.setItem('key', 'value');
    

ページA.htmlとB.htmlを同じドメイン名の下に置くHTTPサーバで、まずA.htmlページを開き、B.htmlページを開くと効果が見えます.
上のA.html登録イベントのeventオブジェクトには、次の属性があります.
1.key:変更、削除、または追加されたエントリのkey値を表す文字列タイプ.
2.oldValue:前の値を表し、エントリを追加した場合nullを返します.
3.newValue:現在の新しい値を表し、エントリを追加するとnullを返します.
4.url/uri:文字列タイプで、このイベントをトリガーするページアドレスを表します.