本实例旨在最直观地说明如何利用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. C++对象作为返回值的问题

    #include "stdio.h" class Object{ public: int i; Object& method1(){ return *this; } }; ...

  2. PHP工厂方法模式

    此模式中,通过定义一个抽象的核心工厂类,并定义创建产品对象的接口,创建具体产品实例的工作延迟到其工厂子类去完成.这样做的好处是核心类只关注工厂类的接口定义,而具体的产品实例交给具体的工厂子类去创建.当 ...

  3. shiro:hasPermission 标签 ：验证当前用户是否拥有指定权限

    1.这些值是存在数据库里的,在哪里找呢?sys_menu 中的permission列. <shiro:hasPermission name="cms:article:edit" ...

  4. 下载神器（vip下载速度）

    简单介绍: 用过好几款下载神器,现在推荐一款比较好用的软件,强调一点本软件强调开源免费的原则,禁止一切人员在其中收取费用. 我把这款软件放到了,自己的百度云盘. 神器的使用教程如下: 百度云下载连接: ...

  5. docker 基础之数据管理

    数据卷 一.将本地默认目录挂载到docker容器内指定的目录 #将本地的目录挂在到docker容器内 docker run -it --name container-test -h CONTAINER ...

  6. /etc/fstab 文件挂载配置文件

    (1)/etc/fstab 每行定义一个要挂载的文件系统 mount -a 自动挂载/etc/fstab文件没有挂载的设备,不管已挂载过的设备 如果想刷新修改过已挂载的设备,mount -o remo ...

  7. webapi快速开发框架

    一.webapi快速开发框架搭建之后台 从0开始搭建webapi基本框架.权限控制.异常管理.日志管理.缓存管理 源码:https://github.com/shengyu-kmust/webapi ...

  8. 【leetcode-100】 简单 树相关题目

    100. 相同的树 (1过,熟练) 给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 ...

  9. HDU 6400(括号组合 ~)

    题意是说在 h 行 w 列的矩阵中,通过设计使得尽可能多的行或列能满足题中的平衡条件. 如果行数(列数)是奇数,那么每一列(行)一定不能平衡,就要按照满足每一行(列)平衡,输出“ () “:若行数和列 ...

  10. row_number()over()使用

    语法: ROW_NUMBER ( ) OVER ( [ PARTITION BY value_expression , ... [ n ] ] order_by_clause ) 通过语法可以看出 o ...