h5本地存储登录页面实现记住密码功能

-->

h5本地存储登录页面实现记住密码功能

2021-01-15 14:46发布

站内文章 / 后端开发

87 0

该账号已被封号

女 | 书童

私信

 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>