いまさらHTML5（Web StorageのlocalStorage編） #localStorage

はじめに

題名にHTML5と書いてはありますが、「Web Storage」ってHTML5から分離されてたんですねぇ
というわけで、タグからは一応「HTML5」を外しております。

前回、前々回の続きで、蓄えた履歴を保存してみます。

※：「localStorage」はローカルHTMLの場合、IEでは使用出来ないらしいです。（現在ソース検索中）

localStorage

W3Cの仕様を見てみます。

IDL

interface Storage {
  readonly attribute unsigned long length;
  DOMString key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

属性1つ、メソッドが５つという事がわかります。

属性名	概要
length	Storageの要素数を返します。

メソッド名	概要
key	引数番目のキー名を返します、存在しない場合はnullを返ります。
getItem	引数のキー名に設定されている値を返します、キー名が存在しない場合はnullを返します。
setItem	引数のキー名に引数の値を設定します、すでにキー名が存在していた場合は、上書きされます。
removeItem	引数のキー名を削除します。Storageの要素数も減少します。
clear	Storageの全ての要素を削除します。

サンプル

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

現在設定されている要素を全て出力するサンプルです。

実装

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>メール作成</title>
    <style>
        * {font-family: monospace}
    </style>
    <script>
        var HISTORY_MAX = 5;
        var LOCALSTORAGE_KEY = "sample_localstorage_key_001";
        var hist = [];
        function init() {
            var value = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY));
            if (value) {
                hist = hist.concat(value);
                setOptions();
            }
            document.getElementById("createbtn").addEventListener("click", createEmail, true);
        }
        function createEmail() {
            var who = document.getElementById("who").value;
            if (who) {
                var tmp = [];
                tmp.push(who);
                for (var i = 0; i < hist.length; i++) {
                    if (hist[i] !== who) {
                        tmp.push(hist[i]);
                    }
                    if (tmp.length >= HISTORY_MAX) {
                        break;
                    }
                }
                hist = tmp;
                setOptions();
                localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(hist));
            }
            document.getElementById("who").value = null;
        }
        function setOptions() {
            var element = document.getElementById("wholist");
            while (element.firstChild) { element.removeChild(element.firstChild); }
            for (var i = 0; i < hist.length; i++) {
                var option = document.createElement("option");
                option.setAttribute("value", hist[i]);
                element.appendChild(option);
            }
        }
        window.onload = init;
    </script>
</head>
<body>
    <table>
        <tr><td>誰？</td><td><input id="who" list="wholist" type="text" value="" size="50" />
        <datalist id="wholist"></datalist></td></tr>
        <tr><td colspan="2"<td><button id="createbtn">作成</button></td></tr>
    </table>
</body>
</html>

部分的に説明します。

localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(hist));

保存部分です、値をJSON文字列にして保存します。

var value = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY));
if (value) {
    hist = hist.concat(value);

読み出し部分です、JSON文字列化してあったものをオブジェクトに直し、配列に入れなおしています。

さいごに

思ったより簡単でした。
ただし、ローカルHTMLの場合「file://」でlocalStorageは1つとみなされるみたいで。
「clear」メソッドで全てが消えてしまいますので、注意が必要です。