本实例旨在最直观地说明如何利用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"> <meta http-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=/"; }