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>