JS登录界面如何储存用户名和密码信息,实现登录的时候查询验证匹配,不用数据库有三个用户,求JS代码

JavaScript028

JS登录界面如何储存用户名和密码信息,实现登录的时候查询验证匹配,不用数据库有三个用户,求JS代码,第1张

HTML代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<div>

用户名 : <input type="text" name="username" id="username_input"></br>

密码 : <input type="password" name="passwd" id="passwd_input"></br>

<input type="button" value="登录" onclick="login()">

</div>

</body>

</html>

Js代码

<script type="text/javascript">

var accountAll = [

{'username' : 'admin','passwd' : 'admin123'},

{'username' : 'jack','passwd' : 'jack'}

] // 存储账户json数据的数组

function login(){ //登陆判断

var username = document.getElementById('username_input').value // 获取username输入框内容

var passwd = document.getElementById('passwd_input').value // 获取passwd输入框内容

var account = accountAll.filter(function(e){return e.username == username})[0] // 筛选账号返回数组,不存在则返回空数组

if(!account){

console.log('账户不存在')

} else {

if(account.username == username && account.passwd == passwd){

console.log('登陆成功')

} else {

console.log('登陆失败')

}

}

}

</script>

如图所示操作代码即可:

登录页面实现记住用户名和密码功能的方法:

1、使用cookie的方法将用户名和密码保存到本地电脑上;

2、PS在页面载入时获取cookie;

3、在勾选时设置一个cookie的有效时间就可以了。