html+js实现登录的账号密码保存 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7 
 8         form {
 9             width: 500px;
10             height: 500px;
11             position: absolute;
12             top: 50%;
13             left: 50%;
14             margin-left: -250px;
15             margin-top: -250px;
16         }
17 
18         input[type="text"], input[type="password"] {
19             outline: medium;
20             width: 400px;
21             height: 40px;
22             margin: 20px 50px;
23             text-indent: 1em;
24         }
25 
26         input[type="submit"] {
27             display: block;
28             width: 300px;
29             margin-left: 100px;
30             margin-top: 20px;
31             background-color: #f50;
32             color: #fff;
33             border: none;
34             height: 40px;
35             border-radius: 10px;
36         }
37 
38         label {
39             margin: 0 50px;
40         }
41     </style>
42 </head>
43 <body>
44     <form class="form" action="">
45         <input type="text" id="zhanghao" placeholder="请输入账号" />
46         <input type="password" id='pass' placeholder="请输入密码" />
47         <label for="bc"><input id="bc" type="radio" name="bc" value="1" />保存</label>
48         <label for="bbc"><input type="radio" id="bbc" name="bc" value="0"   />不保存</label>
49         <input type="submit" value="确定" />
50     </form>
51 
52 
53     <script type="text/javascript">
54         var bc = document.querySelector("#bc");
55         var bbc = document.querySelector("#bbc");
56         var form = document.querySelector(".form");
57         var zhanghao = document.querySelector("#zhanghao");
58         var pass = document.querySelector("#pass");
59         if (typeof (Storage) !== "undefined") {
60             if (localStorage.zhanghao_strorage && localStorage.pass_strorage && localStorage.bc_strorage) {
61                 zhanghao.value = localStorage.zhanghao_strorage;
62                 pass.value = localStorage.pass_strorage;
63                 bc.setAttribute("checked", "checked")
64             }
65         } else {
66             // 抱歉! 不支持 web 存储。
67         }
68         form.onsubmit = function () {
69             if (typeof (Storage) !== "undefined") {
70                 if (bc.checked) {
71                     console.log("保存")
72                     var zhanghao_val = zhanghao.value;
73                     var pass_val = pass.value;
74                     localStorage.setItem("zhanghao_strorage", zhanghao_val);
75                     localStorage.setItem("pass_strorage", pass_val);
76                     localStorage.setItem("bc_strorage", "bc");
77                 } else {
78                     localStorage.clear();//移除所有；
79                 }
80             } else {
81                 // 抱歉! 不支持 web 存储。
82             }
83         }
84     </script>
85 </body>
86 </html>

 

posted @ 2021-06-04 17:26  每天进步多一点  阅读(1761)  评论(0)    收藏  举报