sample: save the table state with localStorage

HTML

<input type="button" id="btn" value="hoge">
<input type="date" id="date">
<input type="button" value="データ消去" id="syoukyo">
<table id="table"></table>

JavaScript

/*
	データの形式
  var data = {
  	"番号（挿入時のiの値）": "日付",
  	"番号（挿入時のiの値）": "日付",
  	"番号（挿入時のiの値）": "日付"
  };
	とする（JSON）

　理由
  ・復元する際、繰り返し処理にかけるため、すべてのデータは1つのオブジェクトにまとまっていてほしい
  ・オブジェクトを文字列に変換（JSON.stringify）、またはその逆（JSON.parse）が容易
*/

//データ読み込み（無い場合は空のオブジェクト）
var data = JSON.parse(localStorage.getItem("data")) || {};
var i = 0;

//読み込んだデータを元にtableを復元
for(var key in data) {
	i = key;  //iは最終的に、過去の連番の最大値になる

	var tr = $('<tr></tr>');
	tr.append('<td>' + data[key] + '</td>');
  tr.append('<td><input type="button" id="ex' + i + '" value="削除"></td>');
  tr.append('<td><input type="button" id="kakunin' + i + '" value="確認"></td>');
  tr.appendTo('#table');
}

$("#btn").on("click", function() {
	i++;

	var tr = $('<tr></tr>');
	tr.append('<td>' + $("#date").val() + '</td>');
  tr.append('<td><input type="button" id="ex' + i + '" value="削除"></td>');
  tr.append('<td><input type="button" id="kakunin' + i + '" value="確認"></td>');
  tr.appendTo('#table');
  
  //日付と連番をdataオブジェクトに入れ、
  data[i] = $("#date").val();
  
  //それをlocalStorageに書き込む
  localStorage.setItem("data", JSON.stringify(data));
});
$("#syoukyo").on("click",function(){
if(confirm("ローカルストレージのデータを消去しますか？"))
{localStorage.clear();}
})