ここのサンプルを少し改造しています．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<script>
//変数storageにlocalStorageを格納
var myData = localStorage;//たぶん”localstorage”というのは変えてはいけない
//myDataに保存する
function dataSave() {
var myKey = document.getElementById("mykey").value;
var myValue = document.getElementById("myvalue").value;
myData.setItem(myKey, myValue);
show_result();
}
//データを消去
function myclear() {
myData.clear();
show_result();
}
//保存されているデータをリスト表示する
function show_result() {
var result = "";
//保存されているデータの数だけループ
for(var i=0; i<myData.length; i++){
//i番目のキーを取得
// var k = myData.key(i);
var calledData = myData.key(i);
result += calledData + "は" + myData.getItem(calledData) + "です<br>";
}
//上のループで作成されたテキストを表示する
document.getElementById("show_result").innerHTML = result;
}
//
function removeStorage() {
var key = document.getElementById("sakujoKey").value;
myData.removeItem(key);
key = "";
show_result();
}
</script>
<title>Web Storage サンプル</title>
</head>
<body onload="show_result();"><!-- ←ここで結果を自動表示させている-->
<p>
キー：<input id="mykey" type="text">
値：<input id="myvalue" type="text">
<input type="button" value="ストレージに保存" onClick="dataSave()">
</p>
<p>
<div id="show_result"></div>
<input type="button" value="ストレージをクリア" onClick="myclear()">
<input type="button" value="リスト表示" onClick="show_result()">
<br />
削除するキー：<input id="sakujoKey" type="text">
<button id="button" onclick="removeStorage()">このキーを削除</button>
</p>
</body>
</html>
このデータは共有できるので，同じサーバ（で判別している）であれば別のページからでもこのデータをみられる．
そこで，書き込み用ページと，読み出しようページを分けて，普段は読み出し用ページ，特別な時に書き込みようページへ移動してデータを追加というのも可能です．
データはクリア以外にも，キーワードを指定して削除という方法があります．
「削除するキー」の横に削除したいキーワードを入れて，削除ボタンを押すと，そのキーと値が削除されます．
なお，同じキーの場合は，上書きされますので，日付などで固有化させてください．
例えば，「2014年11月電気代」という風に．
配列に入れているので並び替え可能かと思われますが（ソート）その場合は配列への書き込み方法を変更する必要があるかも．
