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="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>

<!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>

<!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——登录注册极简版

相关文章