实现记住用户名和密码---本地保存JS、CSS、HTML

实现记住用户名和密码—本地保存JS、CSS、HTML

样例：

主要使用本地存储 ：localStorage
代码：

<div class="context">
			<h2>用户登陆</h3>
			<div class="form">
				用户名：<input type="text" class="username" />
				密码：<input type="password" class="password" />
				<input type="checkbox" class="remeber" />记住用户名和密码</br>
				<button type="submit" value="登录">登录</button>
			</div>
		</div>
		<script>
			
			var username=document.querySelector(".username");
			var password=document.querySelector(".password");
			var remeber=document.querySelector(".remeber");
			var bt=document.querySelector("button");
			//给登录按钮绑定点击事件
			bt.addEventListener("click",function(){
				//得到文本框里面的值
				var obj={
				username:username.value,
				password:password.value,
			}
			//如果复选框是选中的，就将文本框的值放入本地存储里面
			if(remeber.checked){
				console.log("checked")
				localStorage.setItem("data",JSON.stringify(obj))
			}
			})
			//获取本地存储里面的数据
			var obj=JSON.parse(localStorage.getItem("data"));
			//如果里面有值，则将里面的值赋给文本框，并将复选框变为选中状态
			if(obj){
				username.value=obj.username;
				password.value=obj.passwprd;
				remeber.checked=true;
			}
			
		</script>