cookie——登錄註冊極簡版
阿新 • • 發佈：2017-08-13
btn .html dsta encode ont creat lac set tle
本實例旨在最直觀地說明如何利用cookie完成登錄註冊功能，忽略正則驗證。
index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <metahttp-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> a { color: red; } </style> </head> <body> 我是首頁<br /> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1955082529,2126835222&fm=117&gp=0.jpg"alt=""> <p>內容不錯？去<a href="register.html">註冊</a></p> <p>已有賬號？直接<a href="login.html">登錄</a></p> </body> </html>
login.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> a { color: red; } </style> </head> <body> <form action="" method="get"> <input type="text" placeholder="用戶名"><br /><input type="password" placeholder="密碼"><br /> <input type="button" value="登錄"> <p>沒有賬號？去<a href="register.html">註冊</a></p> </form> <script src="cookie.js"></script> <script> var oBtn = document.getElementsByTagName(‘input‘); oBtn[2].onclick = function(){ if(getCookie(oBtn[0].value) && getCookie(oBtn[0].value) == oBtn[1].value){//該賬號存在且密碼正確 alert(‘登陸成功!‘); location.href = ‘index.html‘; }else{ alert(‘登錄名或密碼有誤‘); } } </script> </body> </html>
register.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> a { color: red; } </style> </head> <body> <form action="" method="get"> <input type="text" placeholder="用戶名"><br /><input type="password" placeholder="密碼"><br /> <input type="button" value="註冊"> <p>已有賬號？直接<a href="login.html">登錄</a></p> </form> <script src="cookie.js"></script> <script> var oBtn = document.getElementsByTagName(‘input‘); oBtn[2].onclick = function(){ if(getCookie(oBtn[0].value)){ alert(‘用戶名已存在‘); oBtn[0].value = oBtn[1].value = ‘‘; }else{ createCookie(oBtn[0].value,oBtn[1].value,30); alert(‘註冊成功!跳轉至登錄頁面?‘); location.href = "login.html"; } }; </script> </body> </html>
cookie.js
//創建cookie function createCookie(key,value,expires,domain,secure){ var cookieText = encodeURIComponent(key) + "=" + encodeURIComponent(value) + ";path=/"; if(!isNaN(expires)){ if(typeof expires == "number" && expires > 0){ var date = new Date(); date.setDate(date.getDate() + expires); cookieText += ";expires=" + date; } } if(domain){ cookieText += ";domain=" + domain; } if(secure){ cookieText += ";secure"; } document.cookie = cookieText; } //獲取cookie function getCookie(key){ var keyText = encodeURIComponent(key) + "=" var start = document.cookie.indexOf(keyText); //找到開始位置 if(start != -1){ var end = document.cookie.indexOf(";",start); //找到結束位置 if(end == -1){ end = document.cookie.length; } var cookieValue = decodeURIComponent(document.cookie.substring(start + keyText.length,end)); } return cookieValue; } //刪除cookie function removeCookie(key){ document.cookie = key + "=;expires=" + new Date(0) + ";path=/"; }
cookie——登錄註冊極簡版