課題：文字色と背景色をローカルストレージに保存する

課題：文字色と背景色をローカルストレージに保存する JavaScript

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="main.js"></script>
	<title>課題_文字色と背景色を保存する</title>
</head>
<body>
	<h1>課題_文字色と背景色を保存する</h1>
	<p><input type="text" id="bkcolor" size="40" placeholder="背景色をいれてね　例）red, skyblue, #ffcc00 ..."></p>
	<p><input type="text" id="color" size="40" placeholder="文字色をいれてね　例）red, skyblue, #ffcc00 ..."></p>
	<p><button type="button" id="changeBtn">色を変える</button></p>
</body>
</html>

main.js

/*
 * main.js: 
 *		文字色と背景色を保存する（ローカルストレージに保存）
 *
 */

var KEY_COLOR = "COLOR";				// 文字色用キー
var KEY_BKCOLOR = "BKCOLOR";			// 背景色用キー

var color = null;							// 文字色
var bkcolor = null;						// 背景色

/*
 * ローカルストレージのデータチェック
 */
function getStorage(){
	// ローカルストレージに保存された内容を取得
	color = localStorage.getItem(KEY_COLOR);
	bkcolor = localStorage.getItem(KEY_BKCOLOR);
	
	// ローカルストレージに文字色と背景色データが保存されていれば色変更
	if(color !== null && bkcolor != null){
		setColor();
	}
}

/*
 * ローカルストレージにデータを保存する
 */
function setStorage(){
	localStorage.setItem(KEY_BKCOLOR, bkcolor);
	localStorage.setItem(KEY_COLOR, color);
}

/*
 * 文字色と背景色を変更する
 */
function setColor(){
	document.querySelector("body").style.color = color;
	document.querySelector("body").style.backgroundColor = bkcolor;
}

/*
 * 起動時にローカルストレージの内容をチェックして色を設定
 */
window.addEventListener("load", function(){
	// ボタンイベント設定
	document.getElementById("changeBtn").addEventListener("click", function(){
		// テキストボックスに入力された文字色と背景色を取得
		color = document.getElementById("color").value;
		bkcolor = document.getElementById("bkcolor").value;
		
		// 双方のテキストボックスのどちらかが何も入っていないとき
		if(color === "" || bkcolor === ""){
			alert("文字色と背景色を指定してください");
			return;
		}
		
		// 文字色・背景色変更
		setColor();
		
		// 変更した色名をストレージに保存
		setStorage();
	});
	
	// ローカルストレージの内容をチェック
	getStorage();

});

コメント