cookie记住账号密码

注意：设置cookie要在服务器上，不然存不上的。（Chrome）
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>cookie本地存储</title>
 9 </head>
10 <body>
11 <form action="">
12     用户名：<input type="text" id="username" value=""/>
13     密码：<input type="password" id="userpassword" value=""/>
14     <input type="checkbox" id="remember" onclick="rememberValue(this)"><label for="remember">记住账号密码</label>
15 </form>
16 
17 <script>
18     //JS操作cookies方法!
19 
20     //设置cookies
21     /**
22      * c_name: 给你的cookie起一个独一无二的名字
23      * value: 获取表单标签的内容
24      * expiredays: 设置保存时间
25      */
26     function setCookie(c_name, value, expiredays) {
27         let exdate = new Date();
28         exdate.setDate(exdate.getDate() + expiredays);
29         document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
30     }
31 
32     // 读取cookies
33     function getCookie(name) {
34         var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
35 
36         if (arr = document.cookie.match(reg))
37 
38             return (arr[2]);
39         else
40             return null;
41     }
42 
43     // 删除cookies
44     function delCookie(name) {
45         var exp = new Date();
46         exp.setTime(exp.getTime() - 1);
47         var cval = getCookie(name);
48         if (cval != null){
49             document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
50         }    
51     }
52 
53     // 使用示例
54     var username = document.getElementById("username"); // 获取input username
55     var userpwd = document.getElementById("userpassword"); // 获取input userpassword
56     var remember = document.getElementById("remember"); // 获取记住账号密码
57     // 点击复选框记住 账号、密码、复选框
58     function rememberValue() {
59         if (remember.checked == true) {
60             setCookie('user', username.value);
61             setCookie('pwd', userpwd.value, 30);
62             setCookie('remember', remember.checked, 30);
63         } else {
64             delCookie("user");
65             delCookie("pwd");
66             delCookie("remember");
67         }
68     }
69     // 页面加载完毕后从cookie里读取值并填入相应的标签内
70     window.onload = function () {
71         username.value = getCookie("user");
72         userpwd.value = getCookie("pwd");
73         remember.checked = getCookie("remember");
74     }
75 
76 </script>
77 </body>
78 </html>
cookie记住账号密码

猜你喜欢
