【Javascript】ローカルストレージのデータをテーブルに出力

Javascriptでローカルストレージに保存したデータをテーブル(Table)に出力する方法をまとめました。

## ローカルストレージのデータをテーブルに出力

Javascriptでは、ローカルストレージを使って、データをブラウザに保存させることができます。

■実行例

<br />

記述例	–
localStorage.setItem(“キー名”, 値)	データセット（キー、値）を保存します。
localStorage.getItem(“キー名”)	キー名を指定して保存した値を取り出します。
localStorage.removeItem(“キー名”)	キー名を指定して値を削除します。
localStorage.clear()	保存している全てのデータを削除します。

–	参考記事
1	【Javascript】ローカルストレージにデータ・設定を保存
2	【Javascript】ローカルストレージに複数の値（配列）を保存

今回は、保存したデータを表に出力してみました。

## サンプルコード

サンプルプログラムのソースコードです。

Javascript

main.js

// ローカルストレージに保存
var saveStorage = function(){
    var key = document.getElementById("key").value;
    var value = document.getElementById("value").value;
    if (key && value) {
      localStorage.setItem(key, value);
    }
    key = "";
    value = "";
    viewStorage();
};

// 特定のキーと値を削除
var removeStorage = function(key){
    //var key = document.getElementById("key").value;
    localStorage.removeItem(key);
    key = "";
    viewStorage();
};

// 全てのキーと値を削除
var clearStorage = function(){
    localStorage.clear();
    viewStorage();
};

// ローカルストレージのデータを表に出力
var viewStorage = function(){
    var tb = document.getElementById("tb")
    // テーブルの初期化
    while (tb.firstChild){
      tb.removeChild(tb.firstChild);
    }

    // テーブルの出力
    for (var i=0; i < localStorage.length; i++) {
        var _key = localStorage.key(i);
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        tb.appendChild(tr);
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        td1.innerHTML = _key;
        td2.innerHTML = localStorage.getItem(_key);
        td3.innerHTML = '<input type="button" onclick="removeStorage(\'' + _key + '\')" value="削除">';
    }
};

window.onload = function() {
    viewStorage();

    // 保存ボタンが押されたら実行
    document.getElementById("save").onclick = function() {
        saveStorage();
    };

    // 削除ボタンが押されたら実行
    document.getElementById("clear").onclick = function() {
        clearStorage();
    };
};

HTML

index.html

<!DOCtype html>
<html>
<head>
  <meta charset="utf-8">
  <title>テスト</title>
  <link rel='stylesheet' href='main.css' type='text/css' />
  <pre type="text/javapre" src="main.js"></pre>
</head>
<body>

<p>キー<input id="key" type="text" />
 値<input id="value" type="text" />
<input type="button" id="save" onclick="saveStorage()" value="保存">
<input type="button" id="clear" onclick="clearStorage()" value="全て削除">
</p>

<br><br>

<table>
  <tr>
    <th>キー</th>
    <th>値</th>
    <th>ボタン</th>
  </tr>
  <tbody id="tb">
  </tbody>
</table>

</body>
</html>

追記

Cordovaの場合、なぜonclickが機能しませんでした。
そこで、onclickを使わずに「削除ボタン」を実装したバージョンのコードを下記に公開します。
・main.js

-	関連記事
1	【Cordova入門】Androidアプリ開発編
2	Javascript入門サンプル集
3	Node.js入門