<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <script type="text/javascript" charset="utf-8"> mui.init(); </script> <style> body { margin-left: 500px; } fieldset { width: 380px; height: 220px; text-align: center; } #txtId, #txtPwd { width: 240px; margin: 10px auto; } </style> </head> <body> <fieldset id=""> <legend>用户登录</legend> 用户名：<input type="text" id="txtId" /><br /> 密码：<input type="password" id="txtPwd" /><br /> <input type="checkbox" id="chkRem" />记住密码<br /> <input type="button" value="登录" onclick="remPwd()" /> </fieldset> <script type="text/javascript"> var Id = localStorage.getItem("txtId"); if(Id != null) //如果缓存中有数据，则加载出来 { document.getElementById("txtId").value = Id; document.getElementById("txtPwd").value = localStorage.getItem("txtPwd"); document.getElementById("chkRem").checked = "checked"; } //将账号与密码保存到Localstore function remPwd() { var check = document.getElementById("chkRem"); if(check.checked) //判断记住密码项是否勾选，是则记住密码到本地缓存 { var id = document.getElementById("txtId").value; var pwd = document.getElementById("txtPwd").value; localStorage.setItem("txtId", id); localStorage.setItem("txtPwd", pwd); } else //否则就移除本地缓存 { localStorage.removeItem("txtId"); localStorage.removeItem("txtPwd"); } } </script> </body> </html>
--老白菜原创