1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <style type="text/css"> 7 .mar{ 8 position: absolute; 9 left: 400px; 10 top:100px; 11 } 12 button{ 13 margin-left: 40%; 14 margin-top: 5%; 15 } 16 .rember{ 17 margin-left: 3em; 18 } 19 </style> 20 <body> 21 <div class="mar"> 22 <div> 23 <label>账号：</label> 24 <input type="text" id="user" name=""> 25 </div> 26 <div> 27 <label>密码：</label> 28 <input type="password" id="password" name=""> 29 </div> 30 <div class="rember"> 31 <input type="checkbox" name="" id="checkbox"> 32 <label for="checkbox">记住密码</label> 33 </div> 34 <button onclick="reload()">刷新</button> 35 <br> 36 <strong style="color: #ff0000;">点击刷新查看是否记住</strong> 37 </div> 38 39 40 <script type="text/javascript"> 41 // 记住密码 42 var user = document.getElementById('user'), 43 pass = document.getElementById('password'), 44 checkOk = document.getElementById('checkbox'), 45 localUser = localStorage.getItem('user') || '',//获取user的值并保存 46 localPass = localStorage.getItem('pass') || '';//获取password的值并保存 47 user.value = localUser; 48 pass.value = localPass; 49 if(localUser !== '' && localPass !== ''){ 50 checkOk.setAttribute('checked',''); 51 } 52 // checkbox选中触发 53 checkOk.addEventListener('click', () => { 54 if(checkOk.checked){ 55 localStorage.setItem('user',user.value); 56 localStorage.setItem('pass',pass.value); 57 }else{ 58 localStorage.setItem('user',''); 59 localStorage.setItem('pass',''); 60 } 61 }) 62 //刷新 63 function reload(){ 64 window.location.reload(); 65 } 66 </script> 67 </body> 68 </html>