danimal141 · March 30, 2013 09:38
diff --git a/localstorage_sample.html b/localstorage_sample.html

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8" />
  <title>localStorage Sample</title>
  <style>
    form{
      margin-bottom:20px;
    }
    table{
      margin-top:20px;
    }
    th{
      min-width:100px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 </head>
 <body>

    <header>
        <h1>localStorageサンプル</h1>
    </header>

    <div id="main">
      <form>
        Key：
        <input id="textkey" type="text" />
        Value：
        <input id="textdata" type="text" />
      </form>

      <button id="save_btn" >保存</button>
      <button id="display_btn" >表示</button>
      <button id="clear_btn" >全て削除</button>
     
      <table border="1">
        <tr>
          <th>key</th>
          <th>value</th>
        </tr>
        <tbody id="list"></tbody>
      </table>
    </div>


  <script type="text/javascript">
    var ls = localStorage;

    //init
    $(document).ready(viewStorage);
    

    //イベント登録
    $("#save_btn").on("click", setlocalStorage);
    $("#display_btn").on("click", viewStorage);
    $("#clear_btn").on("click", removeallStorage);


    // localStorageへの格納
    function setlocalStorage() {

      var key = $("#textkey").val();
      var value = $("#textdata").val();

      // key,valueに値が入っているかチェック
      if (key && value) {
        ls.setItem(key, value);
      }

    }

    // localStorageからのデータの取得と表示
    function viewStorage() {
      //いったん中身を空にする
      $("#list").empty();

      // localStorageすべての情報の取得
      for (var i=0; i < ls.length; i++) {
        var _key = ls.key(i);
        
        // 登録されているkey, valueを順に取得して表示
         var tr = $("<tr></tr>");
         var td1 = $("<td></td>");
         var td2 = $("<td></td>");
         $("#list").append(tr);
         tr.append(td1).append(td2);
         td1.html(_key);
         td2.html(ls.getItem(_key));
      }
    }

    // localStorageからすべて削除
    function removeallStorage() {
      ls.clear();
      location.reload();
    }

  </script>
 </body>
 </html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>localStorage Sample</title>
	<style>
	form{
	margin-bottom:20px;
	}
	table{
	margin-top:20px;
	}
	th{
	min-width:100px;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	</head>
	<body>

	<header>
	<h1>localStorageサンプル</h1>
	</header>

	<div id="main">
	<form>
	Key：
	<input id="textkey" type="text" />
	Value：
	<input id="textdata" type="text" />
	</form>

	<button id="save_btn" >保存</button>
	<button id="display_btn" >表示</button>
	<button id="clear_btn" >全て削除</button>

	<table border="1">
	<tr>
	<th>key</th>
	<th>value</th>
	</tr>
	<tbody id="list"></tbody>
	</table>
	</div>


	<script type="text/javascript">
	var ls = localStorage;

	//init
	$(document).ready(viewStorage);


	//イベント登録
	$("#save_btn").on("click", setlocalStorage);
	$("#display_btn").on("click", viewStorage);
	$("#clear_btn").on("click", removeallStorage);


	// localStorageへの格納
	function setlocalStorage() {

	var key = $("#textkey").val();
	var value = $("#textdata").val();

	// key,valueに値が入っているかチェック
	if (key && value) {
	ls.setItem(key, value);
	}

	}

	// localStorageからのデータの取得と表示
	function viewStorage() {
	//いったん中身を空にする
	$("#list").empty();

	// localStorageすべての情報の取得
	for (var i=0; i < ls.length; i++) {
	var _key = ls.key(i);

	// 登録されているkey, valueを順に取得して表示
	var tr = $("<tr></tr>");
	var td1 = $("<td></td>");
	var td2 = $("<td></td>");
	$("#list").append(tr);
	tr.append(td1).append(td2);
	td1.html(_key);
	td2.html(ls.getItem(_key));
	}
	}

	// localStorageからすべて削除
	function removeallStorage() {
	ls.clear();
	location.reload();
	}

	</script>
	</body>
	</html>