本实例旨在最直观地说明如何利用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. NOIP 普及组 2012 寻宝(思维？？？)

    传送门 https://www.cnblogs.com/violet-acmer/p/9937201.html 题解: 一开始用暴力查找下一个要去的房间,超时了,emmmmm....... 然后,就稍 ...

  2. zookeeper脑裂

    出现: 在搭建hadoop的HA集群环境后,由于两个namenode的状态不一,当active的namenode由于网络等原因出现假死状态,standby接收不到active的心跳,因此判断activ ...

  3. Luogu P2743 [USACO5.1]乐曲主题Musical Themes

    链接 \(Click\) \(Here\) 人生第一道后缀数组的题目.首先要对输入的串进行差分处理,差分后长度为(\(n - 1\))的相同子段就是原串中长度为\(n\)的相同(可变调)子段.求出来\ ...

  4. SonarQube（代码质量管理）配置与使用

    继 Sonarqube(代码质量管理)环境搭建,交大家如何配置与使用Sonarqube 1: 汉化Sonarqube: 找到 Setting --> Update Center --> A ...

  5. Kafka技术内幕 读书笔记之（六） 存储层——日志的读写

    -Kafka是一个分布式的( distributed ).分区的( partitioned ).复制的( replicated )提交日志( commitlog )服务 . “分布式”是所有分布式系统 ...

  6. [JVM-2]常用JVM命令参数

    (1)-Xms20M 表示设置JVM堆内存的最小值为20M,必须以M为单位 (2)-Xmx20M 表示设置JVM堆内存的最大值为20M,必须以M为单位.将-Xmx和-Xms设置为一样可以避免JVM内存 ...

  7. Git(工作区和暂存区概念)

    Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 先来看名词解释. 工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工 ...

  8. Junit4学习与使用【转】

    参考: http://blog.csdn.net/qqhjqs/article/details/42219037

  9. 2018牛客网暑期ACM多校训练营（第一场）A Monotonic Matrix（LGV）

    题意 分析 考虑01和12的分界线是(n, 0)到(0,m)的两条不相交(可重合)路径分界线以及分界线以上的点是一种,分界线下是一种平移其中一条变成(n-1, -1)到(-1,m-1); 此时起点为{ ...

  10. 快速傅里叶变换(Fast Fourier Transform, FFT)和短时傅里叶变换(short-time Fourier transform,STFT )【资料整理】【自用】

    1. 官方形象展示FFT:https://www.bilibili.com/video/av19141078/?spm_id_from=333.788.b_636f6d6d656e74.6 2. 讲解 ...