<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <form> 昵称：<input type="text" id="username"><br><br> 密码： <input type="password" id="password"><br><br> <input type="button" value="登录" id="login"> <input type="button" value="注册" id="resiger"> <input type="button" value="clear" id="clear"> </form> <script type="text/javascript"> //需求分析：把获取的用户名和密码存入本地存储中 //当用户登陆的时候判断用户名和密码是否在存储中 //我认为应该这样存储用户名和密码 //userpass:[{username:zhangsan,password:123456},{username:lisi,password:123456}] var login = document.getElementById("login"); var resiger = document.getElementById("resiger"); var user = document.getElementById("username"); var pass = document.getElementById("password"); var clear = document.getElementById("clear"); //开始的时候获取本地存储，如果没有，置为[],否则获取 var str = window.localStorage.getItem("userpass") || "[]"; var userpass = JSON.parse(str); //注册功能实现 resiger.onclick = function() { //非空判断 var person = { username: user.value, password: pass.value }; //需要判定用户名是否重复，如果重复，提示该用户名已被注册，并且return //如果没有重复，就把他放入数组中 userpass.push(person); console.log(userpass); var str = JSON.stringify(userpass) window.localStorage.setItem("userpass", str); } //登陆功能实现 login.onclick = function() { var username = user.value; var password = pass.value; var flag = 0; for(var i = 0; i < userpass.length; i++) { if(username == userpass[i].username && password == userpass[i].password) { alert("欢迎" + username + ",登陆成功！"); return; } else { flag++; } } if(flag == userpass.length) { alert("登陆不成功"); } } clear.addEventListener('click',function(){ window.localStorage.clear(); }) </script> </body> </html>