首页 > 代码库 > H5 -- 本地存储计数器的值 和前端校验用户
H5 -- 本地存储计数器的值 和前端校验用户
1. 存储计数器的值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">0</div><br>
<input id="btn" value="http://www.mamicode.com/计数" type="button">
<script>
window.onload = function(){
var div = document.getElementById("div1");
var btn = document.getElementById("btn");
var num = localStorage.getItem("num") ? localStorage.getItem("num") : 0;
div.innerHTML = num +"";
btn.onclick = function(){
num ++;
localStorage.setItem("num",num);
div.innerHTML = localStorage.getItem("num") +"";
}
}
</script>
</body>
</html>
2. 校验用户名和密码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
账号:<input type="text" id="account"><br>
密码:<input type="text" id="pwd"><br>
<input type="button" id="btn" value="http://www.mamicode.com/登录">
<p id="info"></p>
<br><br><br><br><br><br><br><br><br><br><br>
<script>
window.onload = function(){
var account = document.getElementById("account");
var pwd = document.getElementById("pwd");
var login = document.getElementById("btn");
var info = document.getElementById("info"); //展示结果用, 登录成功或登录失败!
var user = [ // 存入数据库的数据(模拟)
{‘account‘: ‘liuting‘, ‘pwd‘: ‘123‘},
{‘account‘: ‘zhangsan‘, ‘pwd‘: ‘456‘},
{‘account‘: ‘lisi‘, ‘pwd‘: ‘789‘},
{‘account‘: ‘wangwu‘, ‘pwd‘: ‘jqk‘},
{‘account‘: ‘wanger‘, ‘pwd‘: ‘abc‘},
{‘account‘: ‘mazi‘, ‘pwd‘: ‘abc123‘}
];
//1. 保存数据到数据库 并从数据库中获取用户信息
var index = 0; // 保证存入的key的唯一性
var arrUser = []; //获取所有本地用户
for(var i = 0, len = user.length; i < len; i++){ //把所有的模拟的用户保存到数据库并 从数据库获取所有的用户信息
localStorage.setItem(‘account‘+ index, user[i][‘account‘]);
localStorage.setItem(‘pwd‘+ index, user[i][‘pwd‘]);
var userSave = {};
userSave[‘account‘] = localStorage.getItem(‘account‘+ index);
userSave[‘pwd‘] = localStorage.getItem(‘pwd‘+ index);
arrUser[index] = userSave;
index++;
}
//2. 点击登录按钮的时候 进行账号和密码校验
login.onclick = function(){
if(arrUser){
for(var i = 0, len = arrUser.length; i < len; i++) {
//如果前台输入的账号和密码与数据库中的账号和密码一致则登录成功!反之失败!
if(account.value =http://www.mamicode.com/= arrUser[i][‘account‘] && pwd.value == arrUser[i][‘pwd‘]) {"登录成功!"
return; // 跳转到首页
}else {
info.style.color = ‘red‘;
info.innerHTML = "账号或密码有误!请重新输入!"
}
}
}else {
info.style.color = ‘red‘;
info.innerHTML = "数据库中没有数据";
}
}
}
</script>
</body>
</html>
H5 -- 本地存储计数器的值 和前端校验用户
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。