cookie——登录注册极简版
本实例旨在最直观地说明如何利⽤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="ss1.bdstatic/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>document有安卓版吗
<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 = ElementsByTagName('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 = ElementsByTagName('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.Date() + expires);
cookieText += ";expires=" + date;
}
}
if(domain){
cookieText += ";domain=" + domain;
}
if(secure){
cookieText += ";secure";
}
}
//获取cookie
function getCookie(key){
var keyText = encodeURIComponent(key) + "="
var start = kie.indexOf(keyText); //到开始位置
if(start != -1){
var end = kie.indexOf(";",start); //到结束位置
if(end == -1){
end = kie.length;
}
var cookieValue = kie.substring(start + keyText.length,end));    }
return cookieValue;
}
//删除cookie
function removeCookie(key){
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。