ブラウザにデータを保存できるwebstorageのサンプル

ここのサンプルを少し改造しています．

<!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月電気代」という風に．

配列に入れているので並び替え可能かと思われますが（ソート）その場合は配列への書き込み方法を変更する必要があるかも．