话不多说，上代码。
登录功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登陆</title>
<style type="text/css">
.deng {
margin-left: 36%;
margin-top: 200px;
}
div h3 {
margin-left: 10%;
}
button {
float: left;
margin-top: -39px;
margin-left: 215px;
}
#sub {
float: left;
margin-left: 280px;
margin-top: -39px;
}
</style>
</head>
<body>
<div class="deng">
<h3>登录</h3>
<p>账号：<input type="text" name="" id="zh" value=""></p>
<p>密码：<input type="password" name="" id="mm" value=""></p>
<button type="but()">登录</button>
<input type="submit" id="sub" value="注册">
</div>
<script type="text/javascript">
localStorage.setItem()
let but = document.getElementsByTagName("button")[0];
let data = localStorage.getItem('data') == null ? [] : JSON.parse(localStorage.getItem('data'));
console.log(data);
but.onclick = function() {
let zh = document.getElementById("zh").value;
let mm = document.getElementById("mm").value;
if (zh == '' || mm == '') {
alert("账号密码不能为空");
return;
}
let state = -1;
for (let i = 0; i < data.length; i++) {
if (data[i].zhang == zh) {
state = i;
}
}
console.log(state);
if (state < 0) {
alert("账号不存在");
} else {
if (data[state].mima == mm) {
alert("登录成功");
} else {
alert("密码错误");
}
}
}
sub.onclick();
</script>
</body>
</html>
注册功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.zui {
margin-left: 36%;
margin-top: 200px;
}
.yi {
margin-left: 10%;
}
.er {
margin-left: 10%;
}
button {
float: left;
margin-top: -40px;
margin-left: 330px;
}
</style>
</head>
<body>
<div class="zui">
<div class="yi">
<p>注册账号：<input type="zhang" value=""></p>
</div>
<div class="er">
<p>密码： <input type="mmss" value=""></p>
</div>
<button type="button" class="but">注册</button>
</div>
<script type="text/javascript">
let zhs = document.getElementsByTagName('input')[0];
let mms = document.getElementsByTagName('input')[1];
let but = document.getElementsByTagName('button')[0];
but.onclick = function() {
let zhss = zhs.value;
console.log(zhss);
let mmss = mms.value;
console.log(mmss);
let data = localStorage.getItem("data") == null? [] : JSON.parse(localStorage.getItem("data"));
if(data == null){
data= new Array();
}else{
data = JSON.parse(localStorage.getItem("data"));
}
let obj = {
zhang: zhss,
mima: mmss
}
data.push( obj )
let str = JSON.stringify(data);
localStorage.setItem("data", str);
}
</script>
</body>
</html>
本文转载自: https://blog.csdn.net/SqlloveSyn/article/details/127607682
版权归原作者 萝卜头不吃萝卜头 所有， 如有侵权，请联系我们删除。
版权归原作者 萝卜头不吃萝卜头 所有， 如有侵权，请联系我们删除。