JavaScript 表单事件委托localStorage本地存储效果思路将事件委托到父元素上,判断e.target

效果

动画.gif

思路

将事件委托到父元素上,判断e.target的类型
每次input 将输入存储到localStorage中,
加载的时候读取localStorage

方法

localStorage可以存储键值对,也可以存储对象,数组(序列化的),localStorage.setItem("user",JSON.strigify(user))
每次页面加载时读取localStorage, 因此window.load Window：load| MDN (mozilla.org)
读取时反序列化,let user = JSON.parse(localStorage.getItem("user"))

源码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>localstorage</title>
	<style>
		.form {
			width: 200px;
			margin: 0 auto;
		}

		.item {
			margin: 1em 0;
		}
	</style>
</head>

<body>
	<div class="form">
		<div class="item">
			<label>姓名</label>
			<input type="text" name="name" />
		</div>
		<div class="item">
			<label>年龄</label>
			<input type="number" name="age" />
		</div>
		<div class="item">
			<label>性别</label>
			<label>
				<input name="gender" id="male" type="radio" value="male" checked />
				男
			</label>
			<label>
				<input name="gender" id="female" type="radio" value="female" />
				女
			</label>
		</div>
	</div>
	<script>
		// 填写表单时，保存数据到本地
		// TODO: 事件委托实现

		let DOMS = {
			form: document.querySelector(".form"),
			name: document.querySelector('input[name="name"]'),
			age: document.querySelector('input[name="age"]'),
			female: document.querySelector('input[id="female"]'),
			male: document.querySelector('input[id="male"]'),
		}

		DOMS.form.addEventListener("input", function (e) {
			if (e.target.tagName === "INPUT") {
				let user = {};
				user = {
					name: DOMS.name.value,
					age: DOMS.age.value,
					gender: DOMS.female.checked ? "female" : "male",
				};
				localStorage.setItem("user", JSON.stringify(user));
			}
		})

		function load(params) {
			let user = JSON.parse(localStorage.getItem("user"))
			if (!user) {
				return;
			}
			DOMS.name.value = user.name
			DOMS.age.value = user.age
			DOMS[user.gender].checked = true
		}
		window.addEventListener("load", load)
	</script>
</body>

</html>

麻烦

每次处理radio是很麻烦的,原因是radio的name是公用的,无法区分,
解决办法是,给radio添加一个id,并且赋予一个value

启发

事件委托不一定需要读取e.target,也可以批量进行固定操作将代码封装成块,DOM对象也是,这样在代码中看起来非常舒适