本实例旨在最直观地说明如何利用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. 斯坦福大学公开课机器学习：machine learning system design | error metrics for skewed classes（偏斜类问题的定义以及针对偏斜类问题的评估度量值：查准率（precision）和召回率（recall））

    上篇文章提到了误差分析以及设定误差度量值的重要性.那就是设定某个实数来评估学习算法并衡量它的表现.有了算法的评估和误差度量值,有一件重要的事情要注意,就是使用一个合适的误差度量值,有时会对学习算法造成 ...

  2. Counted（内存管理机制）

    class Counted { private: unsigned int count_; public: Counted() : count_() { } virtual ~Counted() { ...

  3. linux 下配置svn

    1.以前配置好的,没做笔记,忘记了.现在重新回忆 查找svn目录:find / -name svn 找到/projects/svn cd /projects/svn 看里面的配置: 查看配置 [roo ...

  4. （string stoi 栈）leetcode682. Baseball Game

    You're now a baseball game point recorder. Given a list of strings, each string can be one of the 4 ...

  5. IO以及file的一些基本方法

    IO定义:将内存的数据 持久化到设备上 这个动作称为输出 写 Output操作 把硬盘上的数据读取到内存 这个动作称为输入 读 Input 把上面这两种操作称为IO操作 File类的静态成员变量:pa ...

  6. 黑苹果是否会成为mac电脑的竞争对手？

    最近黑科技技术大佬们都在传扬windows系统上安装mac系统,不用买mac电脑也可以使用mac一样的操作环境.什么是黑苹果?一起来看看如何在windows系统上安装mac系统. 更多专题,可关注小编 ...

  7. C++ 文件保存

      文件保存: #include <sstream>#include <fstream>using namespace std; /*save to path ./record ...

  8. 面向对象+jquery实现拖拽功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. linux xargs【转】

    -i -I 参数区别 http://man.linuxde.net/xargs 它们都是用来作参数扩展替换的,以下两句代码其实效果一样 cat arg.txt|xargs -i sh sk.sh -p ...

  10. ThinkSNS2.5前台getshell+后台任意文件删除

    12年爆出的一个洞 前几天比赛的一个cms  于是跟出题人表哥要过来审计了看看 漏洞文件再根目录thumb.php中 <?php /* * 自动缩略图 参数 url|w|h|type=" ...