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