**
今天来用HTML5的localStorage本地存储实现一个注册和登录功能，注册的用户可以保存到网站中，没有注册的用户则无法登录。注册时如果有重名时则不能注册，必须使用一个新的用户名，密码可以重复。
**
还是先看看效果图吧
完整代码
代码里注释写得也很清楚了，这里我就不分析了。
<!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>注册</title>
<style>
body{
background-image: url('./bg.jpg');background-size: cover;}
div{
width: 346px;box-sizing: border-box;padding: 15px;background-color: hotpink;text-align: center;margin: 200px auto;opacity: 0.82;border-radius: 10px;}
#register{
display: none;}
input{
margin-bottom: 15px;}
</style>
</head>
<body>
<div id="login">
<label for="username">用户名：</label><input type="text" id="logUN"><br>
<label for="password">密    码：</label><input type="password" id="logPW"><br>
<button onclick="log()">登录</button>
<button onclick="changeRegister()">免费注册</button>
</div>
<div id="register">
<label for="username">用户名：</label><input type="text" id="regUN"><br>
<label for="password">密    码：</label><input type="password" id="regPW"><br>
<button onclick="reg()">注册</button>
</div>
<script>
const login = document.getElementById('login');
const register = document.getElementById('register');
//免费注册按钮按钮
function changeRegister() {
login.style.display = "none";
register.style.display = "block";
}
//登录方法
function log() {
let logUN = document.getElementById('logUN').value;
let logPW = document.getElementById('logPW').value;
//判断用户是否输入数据
if(logUN === "" && logPW === "") {
alert("亲！请输入用户名或密码");
} else {
//判断用户名是否已经注册
if(logUN in localStorage) {
//如果已经注册，获取用户密码
let password = localStorage[logUN];
//判断用户输入的密码和 注册的密码是否一致
if(logPW === password) {
alert("登录成功！");
document.getElementById('logUN').value = "";
document.getElementById('logPW').value = "";
} else {
alert("密码错误");
}
} else {
alert("用户不存在，请先注册！");
}
}
}
//注册方法
function reg() {
let username = document.getElementById('regUN').value;
let password = document.getElementById('regPW').value;
if(username === "" && password === "") {
alert("亲！请输入用户名或密码");
} else {
//判断用户名是否已经存在
if(username in localStorage){
alert("哎呀！用户已经存在了，换一个试试把~~");
document.getElementById('regUN').value = "";
document.getElementById('regPW').value = "";
} else {
//如果不存在，则将用户名和密码存到网页中
localStorage.setItem(username,password);
alert("注册成功！！");
//注册成功，隐藏注册页面，显示登录界面
register.style.display = "none";
login.style.display = "block";
}
}
}
</script>
</body>
</html>