データをローカルに保存する

データをローカルに保存するには、Web Storageを使います。
従来はクッキーを使って最大４ＫＢまでは保存できましたが、HTML5はWeb Storageを使って５ＭＢ程度の保存ができるようになりました。
AmazonやTwitter等のサイトは既にWeb Storageを使ったデータの保存が活用されているそうです。

Web Storageには、sessionStorageとlocalStorageの２種類があります。

sessionStorageはその名の通り、セッション毎に使用されるストレージです。
ウィンドウやタブ毎に保存場所が異なり、sessionStorageに保存されたデータは他のウィンドウやタブからは参照することができません。また、セッション終了時（ウィンドウやタブを閉じる）には同時にsessionStorageに保存されたデータも削除されます。

localStorageはプロトコル・ドメイン・ポート番号が同じであれば全てのセッションでデータが共有され、セッションが終了してもデータは永続されます。


Web Storageのメソッド・プロパティ一覧

メソッド・プロパティ	内容
length	保存データの個数
key(index)	指定インデックスに格納されているキー
getItem(key)	指定キーに格納されている値
setItem(key, value)	指定キーに指定値を格納
removeItem(key)	指定キーと値の組を削除
clear()	全データを削除

Web Storageにはイベントはstorageイベント１つしかありません。
以下に使用上のプロパティ値を載せますが、本項執筆時点ではまだ未実装の物が多いようです。


storageイベントで渡されるオブジェクト

プロパティ	内容
key	イベント発生対象のキー
oldValue	キーに対する旧いvalue
newValue	キーに対する新しいvalue
url	イベントが発生したURL
storageArea	変更データのストレージへの参照

以下はsessionStorageの例です。
KeyとValueに適当な値を入力して「保存」ボタンを押すとsessionStorageに保存されていく様子が分かります。また、一旦ウィンドウを閉じた後で再度開いても、データが残っていないことが分かると思います。

---

Key : Value:

---

---

Key : <input type="text" name="key" id="key" size="20">
  Value:<input type="text" name="value" id="value" size="20">
<input type="button" value="保存" onClick="save()">
<input type="button" value="全クリア" onClick="allClear()">
<div id="list"></div>
<script type="text/javascript">
window.onload = function() {
    list();
}
var storage = window.sessionStorage;
function save() {
    var keyValue = document.getElementById("key").value;
    var valValue = document.getElementById("value").value;

    if ( keyValue && valValue ) {
        storage.setItem(keyValue, valValue);
    }
    keyValue = "";
    valValue = "";
    list();
}
function list() {
    var list = "";
    for ( var i = 0 ; i < storage.length ; i++ ) {
        var _key = storage.key(i);
        list += "sessionStorage[" + i + "] = Key:" + _key + "  Value:" + storage.getItem(_key) + "      <a href=\"#\" onClick=\"remove(" + i + "); return false;\">削除</a><br />";
    }
    document.getElementById("list").innerHTML = list;
}
function remove(index) {
    var _key = storage.key(index);
    storage.removeItem(_key);
    list();
}
function allClear() {
    storage.clear();
    list();
}
</script>

---

以下はlocalStorageを使った例です。
sessionStorageをlocalStorageに変更しただけで同じです。
sessionStorageとlocalStorageは同じメソッド、プロパティが使えます。
また、localStorageはセッションが終了しても残るため、前のセッションで保存したものをページのロード時に表示させるためにonloadイベントを追加しています。

---

Key : Value:

---

---

Key : <input type="text" name="key" id="key" size="20">
  Value:<input type="text" name="value" id="value" size="20">
<input type="button" value="保存" onClick="save()">
<input type="button" value="全クリア" onClick="allClear()">
<div id="list"></div>
<script type="text/javascript">
window.onload = function() {
    list();
}
var storage = window.localStorage;
function save() {
    var keyValue = document.getElementById("key").value;
    var valValue = document.getElementById("value").value;

    if ( keyValue && valValue ) {
        storage.setItem(keyValue, valValue);
    }
    keyValue = "";
    valValue = "";
    list();
}
function list() {
    var list = "";
    for ( var i = 0 ; i < storage.length ; i++ ) {
        var _key = storage.key(i);
        list += "sessionStorage[" + i + "] = Key:" + _key + "  Value:" + storage.getItem(_key) + "      <a href=\"#\" onClick=\"remove(" + i + "); return false;\">削除</a><br />";
    }
    document.getElementById("list").innerHTML = list;
}
function remove(index) {
    var _key = storage.key(index);
    storage.removeItem(_key);
    list();
}
function allClear() {
    storage.clear();
    list();
}
</script>

---