<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>localStorage Sample</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Local Storage</h1>
</div>
</header>
<section id="main">
保存するKey：<input id="textkey" type="text" />
保存する値：<input id="textdata" type="text" />
<button id="button" onclick="set()">保存</button>
<button id="button" onclick="del()">削除</button><br>
<button id="button" onclick="delall()">全て削除</button>
<table border="1">
<thead>
<tr><th>キー</th><th>値</th></tr>
</thead>
<tbody id="list">
<tr><td></td><td></td></tr>
</tbody>
</table>
</section>
<footer></footer>
</div>
<script type="text/javascript">
// Web Storageの実装確認
if (typeof localStorage === 'undefined') {
window.alert("このブラウザはWeb Storage機能が実装されていません");
}
else {
window.alert("このブラウザはWeb Storage機能を実装しています");
var storage = localStorage;
// localnStorageへの格納
function set() {
var key = document.getElementById("textkey").value;
var value = document.getElementById("textdata").value;
// 値の入力チェック
if (key && value) {storage.setItem(key, value); }
// 変数の初期化
key = ""; value = ""; view();
}
// localStorageからのデータの取得と表示
function view() {
var list = document.getElementById("list")
while (list.firstChild) list.removeChild(list.firstChild);
// localtorageすべての情報の取得
for (var i=0; i < storage.length; i++) {
var _key = storage.key(i);
// localStorageのキーと値を表示
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
list.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
td1.innerHTML = _key;
td2.innerHTML = storage.getItem(_key);
}
}
// localStorageから削除
function del() {
var key = document.getElementById("textkey").value;
storage.removeItem(key);
// 変数の初期化
key = ""; view();
}
// localStorageからすべて削除
function delall() {
storage.clear();
view();
}
}
view();
</script>
</body>
</html>