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

发布时间:2021-02-25 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了h5本地存储登录页面实现记住密码功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
 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'57         }else{
58             localStorage.setItem('user',1)">59             localStorage.setItem('pass',1)">60         }
61     })
62     刷新
63     function reload(){
64         window.location.reload();
65 66 </script>
67 </body>
68 </html>

总结


以上是前端之家为你收集整理的h5本地存储登录页面实现记住密码功能全部内容,希望文章能够帮你解决h5本地存储登录页面实现记住密码功能所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。