话不多说，上代码。
登录功能
<!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>
