【JavaScript】localStorageを利用してセーブ機能擬きを作る〜RPG作成〜

前回までのあらすじ
divにidをふってキーボードから取得した値を参照しつつ
div要素を画面の中で動かして遊んでみました。

参考：【JavaScript】divにidをふってゲームボーイ的なサムシングを作る①　〜キーボードの値取得編〜

今日はlocalStorageを使って誰でも簡単に出来る
セーブ機能擬きを作って行きたいと思います。

コード

<html>
	<head>
		<title>My Sample Game</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>

	<body>
		<!-- 以下追記部分 -->
		<button onclick="saveData()">SAVE</button>
		<button onclick="loadData()">LOAD</button>
		<!-- 以上追記部分 -->
		<div id="hoge" style="position:absolute;border: 1px #000 solid;width:30px;height:30px;">
		</div>

		<script>
			window = document.getElementById("hoge");
			window.addEventListener('keypress',KeyPress,true);

			function KeyPress(event){
				var hoge = document.getElementById("hoge");

				var code = event.keyCode;
				var left = (hoge.style.left).match(/\d+/g);
				var top = (hoge.style.top).match(/\d+/g);

				switch(code){
					case 37:
						hoge.style.left = left - 10;
						break;
					case 39:
						hoge.style.left = left - -10;
						break;
					case 38:
						hoge.style.top = top - 10;
						break;
					case 40:
						hoge.style.top = top - -10;
						break;
				}
			}

			function start(){
				var hoge = document.getElementById("hoge");

				hoge.style.left = 0;
				hoge.style.top = 0;
			}
			window.onload = start();

			/*** 以下追記部分 ***/
			function saveData(){
				var hoge = document.getElementById("hoge");
				localStorage.clear();

				localStorage.left = hoge.style.left;
				localStorage.top = hoge.style.top;

				alert("セーブ完了！");
			}

			function loadData(){
				var hoge = document.getElementById("hoge");

				hoge.style.left = localStorage.left;
				hoge.style.top = localStorage.top;
			}
			/*** 以上追記部分 ***/
		</script>
	</body>
</html>

まとめ
凄く簡単ですよね！
これで「最低限動くセーブ機能」が実装出来ます。

個人利用の簡易的なゲームならこれで良いんじゃないかなと僕は思います！
もっと良いやり方知ってるよって方いらっしゃいましたら是非教えてください！