[Malleys]

<section id="user-greeting">
	<form>
		<label>
			Имя
			<input type="text" autocomplete="name" name="name" required>
		</label>
		<label>
			Фамилия
			<input type="text" autocomplete="family-name" name="family-name" required>
		</label>
		<button>Запомнить</button>
	</form>
	<section>
		Привет, <span class="name"></span>, добро пожаловать на сайт!
		<button id="user-greeting-forget-button">Забудь обо мне!</button>
	</section>
</section>
<script>
	(function main() {
		var form = document.querySelector("#user-greeting > form");
		var section = document.querySelector("#user-greeting > section");
		
		function changeView() {
			if ("name" in localStorage) {
				form.style.display = "none";
				section.style.display = "";
				document.querySelector("#user-greeting .name").textContent = localStorage.name;
			} else {
				section.style.display = "none";
				form.style.display = "";
			}
		}
		
		form.addEventListener("submit", function(event) {
			event.preventDefault();
			var data = new FormData(form);
			localStorage.name = [data.get("name"), data.get("family-name")].join(" ");
			changeView();
		});
		
		document.getElementById("user-greeting-forget-button").addEventListener("click", function() {
			delete localStorage.name;
			changeView();
		});
		
		changeView();
	})();
</script>