tango238/localstorage.html

## localstorage.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Local Storage</title>
</head>
<style>
p.success {
	background-color: #0f0;
}
p.fail {
	background-color: #f00;
}
</style>
<body>
<section id="wrapper">
    <header>
    	<h1>Local Storage</h1>
    </header>
	<article>
		<select id="list" size="5" style="width: 100px"></select>
		<button id="btn-remove">Remove</button><br>
		KEY:<input type="text" id="key"><br>
		VAL:<input type="text" id="value">
		<button id="btn-add">Add</button>
		<p id="status">Not Supported</p>
	</article>
</section>
<script>

(function(){
	// ブラウザがAPIをサポートしているか
	var status  = document.getElementById('status');
	if(!localStorage){
	  status.className = 'fail';
	} else {
	  status.className = 'success';
	  status.innerHTML = 'Local Storage is available';
	}

	function load() {
		var list = document.getElementById('list');
		list.innerHTML = '';
		// Local Storageに保存されているデータ分繰り返す
		for (var i = 0; i < localStorage.length; i++) {
			// Local Storageに保存されているキーを取得する
			var key = localStorage.key(i);
			// 取得したデータからOptionを作成。SELECT要素に追加していく
			list.options[list.options.length] = new Option(key, key);
		}
	}

	var btnRemove = document.getElementById('btn-remove');
	btnRemove.onclick = function(){
		var list = document.getElementById('list');
		if (list.selectedIndex < 0) {
			return;
		}
		// 選択されているインデックスの値を取得
		var selected = list.options[list.selectedIndex].value;
		// その値をキーにLocal Storageのデータを削除する
		localStorage.removeItem(selected);
		load();
	};

	var btnAdd = document.getElementById('btn-add');
	btnAdd.onclick = function(){
		// keyに入力されている値を取得する
		var key = document.getElementById('key').value;
		// valueに設定されている値を取得する
		var value = document.getElementById('value').value;
		// 取得したkeyとvalueでLocal Storageに保存する
		localStorage[key] = value;
		load();
	};

	load();
})();
</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Local Storage</title>
	</head>
	<style>
	p.success {
	background-color: #0f0;
	}
	p.fail {
	background-color: #f00;
	}
	</style>
	<body>
	<section id="wrapper">
	<header>
	<h1>Local Storage</h1>
	</header>
	<article>
	<select id="list" size="5" style="width: 100px"></select>
	<button id="btn-remove">Remove</button><br>
	KEY:<input type="text" id="key"><br>
	VAL:<input type="text" id="value">
	<button id="btn-add">Add</button>
	<p id="status">Not Supported</p>
	</article>
	</section>
	<script>

	(function(){
	// ブラウザがAPIをサポートしているか
	var status = document.getElementById('status');
	if(!localStorage){
	status.className = 'fail';
	} else {
	status.className = 'success';
	status.innerHTML = 'Local Storage is available';
	}

	function load() {
	var list = document.getElementById('list');
	list.innerHTML = '';
	// Local Storageに保存されているデータ分繰り返す
	for (var i = 0; i < localStorage.length; i++) {
	// Local Storageに保存されているキーを取得する
	var key = localStorage.key(i);
	// 取得したデータからOptionを作成。SELECT要素に追加していく
	list.options[list.options.length] = new Option(key, key);
	}
	}

	var btnRemove = document.getElementById('btn-remove');
	btnRemove.onclick = function(){
	var list = document.getElementById('list');
	if (list.selectedIndex < 0) {
	return;
	}
	// 選択されているインデックスの値を取得
	var selected = list.options[list.selectedIndex].value;
	// その値をキーにLocal Storageのデータを削除する
	localStorage.removeItem(selected);
	load();
	};

	var btnAdd = document.getElementById('btn-add');
	btnAdd.onclick = function(){
	// keyに入力されている値を取得する
	var key = document.getElementById('key').value;
	// valueに設定されている値を取得する
	var value = document.getElementById('value').value;
	// 取得したkeyとvalueでLocal Storageに保存する
	localStorage[key] = value;
	load();
	};

	load();
	})();
	</script>
	</body>
	</html>