Skip to content

Instantly share code, notes, and snippets.

@danimal141
Created March 30, 2013 09:38
Show Gist options
  • Save danimal141/5276129 to your computer and use it in GitHub Desktop.
Save danimal141/5276129 to your computer and use it in GitHub Desktop.
localstorage sample
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment