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>
h5本地存儲登錄頁面實現記住密碼功能
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。