注意:设置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>