HTML5ローカルストレージのlocalStorageとsessionStorageの具体的な分析

1. 概要

localStorage と sessionStorage は総称して Web Storage と呼ばれ、Web ページがブラウザー側にデータを保存できるようにします。

sessionStorage によって保存されたデータは、セッションが終了すると (通常はウィンドウが閉じられる)、次回 Web サイトにアクセスしたときに消去されます。 Web ページでは、以前の保存データを直接読み取ることができます。保存期間の違いを除けば、これら 2 つの オブジェクト の プロパティとメソッド はまったく同じです。

それらは cookie メカニズムの拡張バージョンに非常によく似ており、より大きなストレージスペースを使用できます。現在、ドメインごとのストレージ制限はブラウザによって異なり、Chrome では 2.5 MB、Firefox と Opera では 5 MB、IE では 10 MB です。このうち、Firefox のストレージ容量は第 1 レベルのドメイン名によって決まりますが、他のブラウザにはこの制限がありません。つまり、Firefox では、a.example.com と b.example が 5MB の記憶域を共有します。さらに、Cookie と同様に、同じドメイン制限の対象となります。 Web ページに保存されたデータは、同じドメイン内の Web ページでのみ読み取ることができます。

window オブジェクト に sessionStorage プロパティと localStorage プロパティが含まれているかどうかを確認することで、ブラウザがこれら 2 つのオブジェクトをサポートしているかどうかを判断できます。

function checkStorageSupport() {    
var result = {};    
//sessionStorage
    if (window.sessionStorage) {
        result.sessionStorage = true;
    } else {
        result.sessionStorage = false;
    }    //localStorage
    if (window.localStorage) {
        result.localStorage = true;
    } else {
        result.localStorage = false;
    }    return result;

}

2. 操作方法

2.1 データの保存・読み込み

sessionStorageとlocalStorageで保存されたデータは「キーと値のペア」の形で存在します。つまり、データの各項目にはキー名と対応する値があります。すべてのデータはテキスト形式で保存されます。

データを保存するには setItem メソッドを使用します。 2 つのパラメータを受け入れます。1 つ目はキー名、2 つ目は保存されたデータです。

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

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

getItem メソッドを使用してデータを読み取ります。パラメーターはキー名という 1 つだけです。

var valueSession = sessionStorage.getItem('key');var valueLocal = localStorage.getItem('key');

2.2 データのクリア

removeItemメソッドは、特定のキー名に対応するデータをクリアするために使用されます。

sessionStorage.removeItem('key');

localStorage.removeItem('key');

clearメソッドは、保存されているデータをすべてクリアするために使用されます。

sessionStorage.clear();

localStorage.clear();

2.3 トラバーサル操作

length 属性と key メソッドを使用して、すべてのキーをトラバースできます。

for (var i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i));
}

key メソッドは、位置に基づいて (0 から開始して) キーの値を取得します。

localStorage.key(1);

3. ストレージ

イベント

保存されたデータが変更されると、ストレージ イベントがトリガーされます。このイベントには

コールバック関数を指定できます。

window.addEventListener('storage', onStorageChange);

コールバック関数はイベント オブジェクトをパラメータとして受け取ります。このイベント オブジェクトの key 属性には、変更されたキー名が保存されます。

function onStorageChange(e) {
    console.log(e.key);
}

key 属性に加えて、イベント オブジェクトには 3 つの属性があります:

oldValue: 更新前の値。キーが新しく追加された場合、この属性は null になります。

newValue: 更新された値。キーが削除された場合、このプロパティは null になります。

url: ストレージ イベントを最初にトリガーした Web ページの URL。

このイベントは、データの変更を引き起こす現在のページではトリガーされないことに注意してください。ブラウザがドメイン名で複数のページを同時に開いた場合、ページの 1 つが sessionStorage または localStorage のデータを変更すると、他のすべてのページのストレージ イベントがトリガーされ、元のページによってはストレージ イベントがトリガーされません。ページ。このメカニズムを通じて、複数のウィンドウ間の通信を実現できます。 IE を除くすべてのブラウザーでは、すべてのページでストレージ イベントがトリガーされます。

以上がHTML5ローカルストレージのlocalStorageとsessionStorageの具体的な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。