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

}

cookie——登录注册极简版的更多相关文章

  1. Underscore源码阅读极简版入门

    看了网上的一些资料,发现大家都写得太复杂,让新手难以入门.于是写了这个极简版的Underscore源码阅读. 源码: https://github.com/hanzichi/underscore-an ...

  2. js消除小游戏(极简版)

    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...

  3. SimpleThreadPool极简版

    package com.dwz.concurrency.chapter13; import java.util.ArrayList; import java.util.LinkedList; impo ...

  4. 极简版ASP.NET Core学习路径及教程

    绝承认这是一个七天速成教程,即使有这个效果,我也不愿意接受这个名字.嗯. 这个路径分为两块: 实践入门 理论延伸 有了ASP.NET以及C#的知识以及项目经验,我们几乎可以不再需要了解任何新的知识就开 ...

  5. 【极简版】SpringBoot+SpringData JPA 管理系统

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在上一篇中已经讲解了如何从零搭建一个SpringBo ...

  6. Mysql 主从复制搭建-极简版

    前言 自己在百度.Google一番踩坑搭建成功后,记录一下,也希望后来人不再被这些坑到. 这里为了方便使用 docker,不会的同学请移步相关 Docker 教程. 正文 1. 启动 mysql #启 ...

  7. 【极简版】OpenGL 超级宝典（第五版）环境配置 VS2010

    事先声明:该教程仅适用于VS2010环境下超级宝典第五版的配置 第一步:下载示例代码和环境包: 链接:https://pan.baidu.com/s/1llRRQ8ymBgMGuXp5M50pJw 提 ...

  8. Vue数据双向绑定(面试必备) 极简版

    我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: ...

  9. 树莓派做私有云盘-极简版（owncloud）

    这里直接给出配置好私有云的镜像,只需烧录镜像后微改配置后即可使用 链接:https://pan.baidu.com/s/1EOQaSQso-0wmnuWgZKknZg提取码:q26h 1.直接将此镜像 ...

随机推荐

  1. eCharts使用图表简单示例

    https://blog.csdn.net/hlbt0112/article/details/48862427 1. eCharts官网 http://echarts.baidu.com/index. ...

  2. Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法

    Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法 在使用struts2的项目中上传文件的时候出现了一个这样的错误: 2011-7 ...

  3. （线性dp，最大连续和）Max Sequence

    Max Sequence Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 18511   Accepted: 7743 Des ...

  4. (Dijkstra) POJ1797 Heavy Transportation

    Heavy Transportation Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 53170   Accepted:  ...

  5. django补充

    通过表名获取app的name models.UserInfo._meta.app_label >>> from repository import models >>&g ...

  6. python自动化开发-[第六天]-常用模块、面向对象

    今日概要: 1.常用模块 - os模块 - random模块 - shutil模块 - hashlib模块 - pickle/json模块 - shelve模块 - configparser模块 - ...

  7. Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码

    Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文主要是记录一写我在学习MapReduce时的一些 ...

  8. HDU - 6305 RMQ Similar Sequence（笛卡尔树）

    http://acm.hdu.edu.cn/showproblem.php?pid=6305 题目 对于A,B两个序列,任意的l,r,如果RMQ(A,l,r)=RMQ(B,l,r),B序列里的数为[0 ...

  9. HDU 1019(求最小公倍数 **)

    题意是求一组数的最小公倍数,不用存,每次输入即刻处理即可. 补充一点:两个自然数的最大公约数与它们的最小公倍数的乘积等于这两个数的乘积. 代码如下: #include <bits/stdc++. ...

  10. PHP7 网络编程（三）孤儿进程与僵尸进程

    基本概念 我们知道在unix/linux中,正常情况下,子进程是通过父进程创建的,子进程在创建新的进程.子进程的结束和父进程的运行是一个异步过程,即父进程永远无法预测子进程 到底什么时候结束. 当一个 ...