html+js實現登錄的賬號密碼保存

本文轉載自查看原文 2021-06-04 17:26 1573 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF-本地保存登錄賬號密碼 linux下git怎么保存賬號密碼 Linux下保存 git賬號密碼 git保存倉庫的賬號密碼樹莓派默認登錄賬號密碼 Git 本地保存賬號密碼的刪除或修改用Html＋Js實現的“自動補全”功能 TortoiseSVN切換更改登錄賬號密碼查看git 賬號密碼和修改git賬號密碼 Linux (centos7.2)賬號無法登錄系統，xshell輸入賬號密碼直接斷開