使用 cookie · JavaScript學習記錄

### 使用 cookie - 設置 `cookie` - 格式：`名字 = 值` - 賦值時不會覆蓋 - 過期時間：`expires = 時間` - 設置前一個 cookie 數據的過期時間，expires 放在數據后面： - `document.cookie = 'password=123;expires='+ oDate;` - 日期對象的使用 - 封裝函數 ```js // 封裝 setCookie 函數 function setCookie(name, value, iTime) { var oDate = new Date(); oDate.setTime(oDate.getTime() + iTime); // 毫秒 document.cookie = name + '=' + value + ';expires=' + oDate; } setCookie('username', '張三', 1000*60*60); ``` - 讀取 `cookie` - 字符串分割 ```js // 封裝 getCookie 函數 getCookie(name) { var arr = document.cookie.split('; '); for (var i in arr) { var arr2 = arr[i].split('='); if (arr2[0] === name){ return arr2[1]; } } return ''; } console.log(getCookie('username')); ``` - 刪除 `cookie` - 已經過期 ```js // 封裝 removeCookie 函數 function removeCookie(name) { setCookie(name, '', -1) } removeCookie('username'); ``` - 例子：使用 `cookie` 記錄上次登陸的用戶名 - 提交時：記錄用戶名 - `window.onload`：讀取用戶名 - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>28.1.登陸后cookie讀取用戶名</title> <style> </style> <script> // 封裝 setCookie 函數 function setCookie(name, value, iTime) { var oDate = new Date(); oDate.setTime(oDate.getTime() + iTime*1000*60*60); document.cookie = name + '=' + value + ';expires=' + oDate; } // 封裝 getCookie 函數 function getCookie(name) { var arr = document.cookie.split('; '); for (var i in arr) { var arr2 = arr[i].split('='); if (arr2[0] === name){ return arr2[1]; } } return ''; } // 封裝 removeCookie 函數 function removeCookie(name) { setCookie(name, '', -1) } window.onload = function () { var oUser = document.getElementById('username'); var oPasswd = document.getElementById('passwd'); var oBtn_sub = document.getElementById('btn_sub'); if (getCookie('username')) { oUser.value = getCookie('username'); } oBtn_sub.onclick = function () { setCookie("username", oUser.value, 1); setCookie("passwd", oPasswd.value, 1); } } </script> </head> <body> <form action="28.1.登陸后cookie讀取用戶名.html" method="GET"> <input type="text" name="username" id="username"> <input type="text" name="passwd" id="passwd"> <input type="submit" name="" id="btn_sub" value="登錄"> </form> </body> </html> ```