HTML 5ローカルストレージのlocalStorage、sessionStorage

1、概要
localStorageとsessionStorageは、Webストレージと総称され、Webページがブラウザ側でデータを格納できるようにします.
sessionStorageに保存されたデータはブラウザのセッションに使用され、セッションが終了すると(通常はウィンドウが閉じる)、データが空になります.localStorageに保存されているデータは長期にわたって存在し、次回このサイトにアクセスする際には、以前保存していたデータを直接Webページで読み取ることができます.保存期間の長さの違いを除いて、この2つのオブジェクトの属性と方法はまったく同じです.
クッキーメカニズムの強化版に似ており、より大きなストレージスペースを使用することができます.現在、ドメイン名ごとのストレージ上限はブラウザによって異なり、Chromeは2.5 MB、FirefoxとOperaは5 MB、IEは10 MBである.ここで、Firefoxのストレージ領域は1級ドメイン名で決定されますが、他のブラウザではこの制限はありません.つまりFirefoxではa.example.comとb.exampleは5 MBのストレージスペースを共有しています.また、クッキーと同様に、同ドメインによって制限されています.あるページに格納されたデータは,同ドメインの下のページのみが読み取ることができる.
WindowsオブジェクトにsessionStorageとlocalStorageのプロパティが含まれているかどうかを確認することで、ブラウザが両方のオブジェクトをサポートしているかどうかを確認できます.

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、storageイベント
格納されたデータが変化するとstorageイベントがトリガーされます.このイベントのコールバック関数を指定できます.

window.addEventListener('storage', onStorageChange);

コールバック関数はeventオブジェクトをパラメータとして受け入れます.このeventオブジェクトのkeyプロパティは、変化するキー名を保存します.

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

keyプロパティのほかにeventオブジェクトのプロパティは3つあります.
oldValue:更新前の値.キーが新しく追加された場合、このプロパティはnullです.
新Value:更新後の値.キーが削除された場合、このプロパティはnullです.
url:storageイベントを元にトリガーしたページのURL.
特に、このイベントは、データの変化をもたらす現在のページでトリガーされないことに注意してください.ブラウザがドメイン名の下にある複数のページを同時に開くと、1つのページがsessionStorageまたはlocalStorageのデータを変更すると、他のすべてのページのstorageイベントがトリガーされ、元のページはstorageイベントをトリガーしません.このメカニズムにより、複数のウィンドウ間の通信を実現することができる.すべてのブラウザのうち、IEブラウザのみが除外され、すべてのページでstorageイベントがトリガーされます.
4、参考リンク
[1] Ryan Stewart, Introducing the HTML5 storage APIs
[2] Getting Started with LocalStorage
[3] Feross Aboukhadijeh, Introducing the HTML5 Hard Disk Filler™ API
[4] Ben Summers, Inter-window messaging using localStorage
[5] Stack Overflow, Why does Internet Explorer fire the window “storage” event on the window that stored the data?
[6] ruanyifeng,  Web Storage：ブラウザ側データ格納メカニズム