JavaScript localStorage

localStorageはブラウザにデータを保存するために使うものです。キーを指定してデータを保存することができます。

単純なサンプル


<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>localStorageのサンプル</title>
</head>

<body>
	<input type="text" id="txt" /><input type="button" onclick="save()" value="保存" />
</body>
<script type="text/javascript">

	//localStorageよりデータ読み出し
	if (localStorage.getItem("key") != null) {
		document.getElementById("txt").value = localStorage.getItem("key")
	}

	function save() {
		var val = document.getElementById("txt").value;
		if (val == "") {

			//ローカルストレージから削除
			localStorage.removeItem("key");
		} else {

			//ローカルストレージに登録
			localStorage.setItem("key", val);
		}
	}
</script>

</html>

保存ボタンを押すと入力したテキストがローカルストレージに保存され、画面表示時にローカルストレージよりデータを読み出し、テキストにセットします。

リスト、マップのサンプル


<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>localStorageのサンプル</title>
</head>

<body>
	<input type="text" id="txt" /><input type="button" onclick="save()" value="保存" />
	<div id="display"></div>
</body>
<script type="text/javascript">

	//localStorageよりMapで取得
	function getMapFromLocalStrage(key) {
		var ret = JSON.parse(localStorage.getItem(key));
		if (ret == null)
			return {};
		return ret;
	}

	//localStorageよりリストで取得
	function getAryFromLocalStrage(key) {
		var ret = JSON.parse(localStorage.getItem(key));
		if (ret == null)
			return [];
		return ret;
	}

	//localStorageに格納
	function setLocalStrage(key, value) {

		if (value == null) {
			localStorage.removeItem(key);
		} else {
			localStorage.setItem(key, JSON.stringify(value));
		}
	}

	//データ表示
	function show() {

		var display = "";

		Object.keys(map).forEach(function (key) {
			display += "<div>" + key + ":" + map[key] + "</div>";
		});

		Object.keys(ary).forEach(function (key) {
			display += "<div>" + ary[key] + "</div>";
		});

		document.getElementById("display").innerHTML = display;
	}

	//保存
	function save() {
		var val = document.getElementById("txt").value;

		if (val == "") {

			map = {};
			ary = [];

			setLocalStrage("map", null);
			setLocalStrage("ary", null);
		} else {

			map[val] = val;
			ary.push(val);

			setLocalStrage("map", map);
			setLocalStrage("ary", ary);
		}
		show();
	}

	var map = getMapFromLocalStrage("map");
	var ary = getAryFromLocalStrage("ary");

	show();
</script>

</html>

JSONオブジェクトを使うと、リスト、マップを文字列に変換できます。
リスト、マップを文字列に変換してLocalStrageに保存、読み込みを行います。

ページのトップへ戻る