Web存储—简易注册登录
Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，cookie只能存储一些短的字符串，Web Storage官方建议为每个网站5MB。
数据仓库 - 用于存储数据
Web Storage分为两种：
1、会话存储：sessionStorage ----替代Session(类似于内存)，本地存储信息只在会话过程中使用，浏览器关闭也就没了
2、本地存储：localStorage -----替代Cookie，信息必须长期保存，保存在客户端本地，且由用户决定时长
两种存储方式的属性方法一致，如下：
- setItem(key,value) ----- 设置数据(新增|修改数据) 参数： key --- 作为存储数据的标识(唯一,不可重复) value ---- 存储的数据内容(number|string)
- getItem(key) ----- 获取数据(读取数据) 参数： key --- 根据key获取对应的数据内容 返回值 ---- key对应的value值
- key(index) ----- 根据索引值返回对应key 参数：index - 索引值 返回值 ---- 返回key值
- removeItem(key) ----- 删除数据 参数：key - 根据key删除指定数据内容
- clear() ----- 将存储系统的所有数据删除(清空)
- length属性 ----- 返回当前存储系统的数据个数
接下来使用本地存储来实现简单的注册登录，实现以下功能：
1、注册信息，并提交至本地，保存用户名和密码；
2、注册信息可以重置及单项删除；
3、登录界面，输入已存储的注册信息，登录成功跳转页面；
步骤：
1、准备一段HTML代码，Bootstrap布局，以下代码从项目中摘出
效果：
1 <div class="row" id="j4">
2 <div>
3 <div class="col-md-4 col-md-push-2 col-xs-8 col-xs-push-2" id="j9">
4 <div id="btn11">登 录</div>
5 <div id="btn22">注 册</div>
6 <div id="part1" >
7 <div id="for11">
8 <span><span style="color: red">* </span>用 户 名：</span><input type="text" id="user1" />
9 <div id="user1Tip"></div>
10 </div>
11 <div id="for22">
12 <span><span style="color: red">* </span>密  码：</span><input type="password" id="pwd2"/>
13 <div id="pwd2Tip"></div>
14 </div>
15 <div id="for66">
16 <button id="gogo">GO</button>
17 </div>
18 </div>
19 <div id="part2">
20 <div id="for1">
21 <span><span style="color: red">* </span>用 户 名：</span><input type="text" id="user" />
22 <div class="emp1">
23 <div class="divD"></div>
24 <div class="divX"></div>
25 </div>
26 <div class="bei" id="userTip"></div>
27 </div>
28 <div id="for2">
29 <span><span style="color: red">* </span>密  码：</span><input type="password" id="pwd1"/>
30 <div class="emp2">
31 <div class="divD"></div>
32 <div class="divX"></div>
33 </div>
34 <div class="bei" id="pwdTip"></div>
35 </div>
36 <div id="for3">
37 <span><span style="color: red">* </span>确认密码：</span><input type="password" id="repwd"/>
38 <div class="emp3">
39 <div class="divD"></div>
40 <div class="divX"></div>
41 </div>
42 <div class="bei" id="repwdTip"></div>
43 </div>
44 <div id="for4">
45 <span><span style="color: red">* </span>联系方式：</span><input type="text" id="tel"/>
46 <div class="emp4">
47 <div class="divD"></div>
48 <div class="divX"></div>
49 </div>
50 <div class="bei" id="telTip"></div>
51 </div>
52 <div id="for5">
53 <span><span style="color: red">* </span> Email：</span><input type="text" id="email"/>
54 <div class="emp5">
55 <div class="divD"></div>
56 <div class="divX"></div>
57 </div>
58 <div class="bei" id="emailTip"></div>
59 </div>
60 <div id="for6">
61 <button id="resut">重置</button> 
62 <button id="rigist">提交</button>
63 </div>
64 </div>
65 </div>
66 </div>
67 </div>
2、编写js代码，实现注册页面的验证信息
function userVaildator() {
//定义正则表达式
var regExp = /^[a-zA-Z0-9]{6,12}$/;
var $myval = $('#user').val();
//a.不能为空
if ($myval == '' || $myval == null) {
$('#userTip').text('账号不能为空').css({
'color': 'red'
});
$('.emp1 .divX').attr('style', 'display:block');
$('.emp1 .divD').attr('style', 'display:none');
return false;
}
//b.英文+数字，长度6-12
else if (!regExp.test($myval)) {
$('#userTip').text('用户名输入格式错误').css({
'color': 'red'
});
$('.emp1 .divX').attr('style', 'display:block');
$('.emp1 .divD').attr('style', 'display:none');
return false;
} else {
$('#userTip').text('用户名输入正确').css({
'color': 'green'
})
$('.emp1 .divD').attr('style', 'display:block');
$('.emp1 .divX').attr('style', 'display:none');
return true;
}
}
function pwdVaildator() {
//定义正则表达式
var regExp = /^[a-zA-Z0-9]{6,8}$/;
var $pwdval = $('#pwd1').val();
//a.不能为空
if ($pwdval == '' || $pwdval == null) {
$('#pwdTip').text('密码不能为空').css({
'color': 'red'
});
$('.emp2 .divX').attr('style', 'display:block');
$('.emp2 .divD').attr('style', 'display:none');
return false;
}
//b.英文+数字，长度6-12
else if (!regExp.test($pwdval)) {
$('#pwdTip').text('密码输入格式错误').css({
'color': 'red'
});
$('.emp2 .divX').attr('style', 'display:block');
$('.emp2 .divD').attr('style', 'display:none');
return false;
} else {
$('#pwdTip').text('密码输入正确').css({
'color': 'green'
});
$('.emp2 .divD').attr('style', 'display:block');
$('.emp2 .divX').attr('style', 'display:none');
return true;
}
}
function repwdVaildator() {
//定义正则表达式
var regExp = /^[a-zA-Z0-9]{6,8}$/;
var $repwdval = $('#repwd').val();
var $pwdval = $('#pwd1').val();
//a.不能为空
if ($repwdval == '' || $repwdval == null) {
$('#repwdTip').text('确认密码不能为空').css({
'color': 'red',
});
$('.emp3 .divX').attr('style', 'display:block');
$('.emp3 .divD').attr('style', 'display:none');
return false;
}
//b.要求同上，需与上一致
else if (!regExp.test($repwdval)) {
$('#repwdTip').text('确认密码输入格式错误').css({
'color': 'red',
});
$('.emp3 .divX').attr('style', 'display:block');
$('.emp3 .divD').attr('style', 'display:none');
return false;
} else if ($repwdval !== $pwdval) {
$('#repwdTip').text('两次密码输入不一致').css({
'color': 'red'
});
$('.emp3 .divX').attr('style', 'display:block');
$('.emp3 .divD').attr('style', 'display:none');
return false;
} else {
$('#repwdTip').text('确认密码输入正确').css({
'color': 'green',
'font-weight': 'normal'
});
$('.emp3 .divD').attr('style', 'display:block');
$('.emp3 .divX').attr('style', 'display:none');
return true;
}
}
function telVaildator() {
//定义正则表达式
var regExp = /^(13|15)[0-9]{9}$/;
var $telval = $('#tel').val();
//a.不能为空
if ($telval == '' || $telval == null) {
$('#telTip').text('联系方式不能为空').css({
'color': 'red'
});
$('.emp4 .divX').attr('style', 'display:block');
$('.emp4 .divD').attr('style', 'display:none');
return false;
}
//b.
else if (!regExp.test($telval)) {
$('#telTip').text('联系方式输入格式错误').css({
'color': 'red',
});
$('.emp4 .divX').attr('style', 'display:block');
$('.emp4 .divD').attr('style', 'display:none');
return false;
} else {
$('#telTip').text('联系方式输入正确').css({
'color': 'green'
});
$('.emp4 .divD').attr('style', 'display:block');
$('.emp4 .divX').attr('style', 'display:none');
return true;
}
}
function emailVaildator() {
//定义正则表达式
var regExp = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var $emailval = $('#email').val();
//a.不能为空
if ($emailval == '' || $emailval == null) {
$('#emailTip').text('email不能为空').css({
'color': 'red'
});
$('.emp5 .divX').attr('style', 'display:block');
$('.emp5 .divD').attr('style', 'display:none');
return false;
}
//b.
else if (!regExp.test($emailval)) {
$('#emailTip').text('email输入格式错误').css({
'color': 'red'
});
$('.emp5 .divX').attr('style', 'display:block');
$('.emp5 .divD').attr('style', 'display:none');
return false;
} else {
$('#emailTip').text('email输入正确').css({
'color': 'green'
});
$('.emp5 .divD').attr('style', 'display:block');
$('.emp5 .divX').attr('style', 'display:none');
return true;
}
}
//1.用户名验证
$('#user').focus(function () {
$('#userTip').text('请输入英文或数字，长度在6~12之间').css({
'font-size': '10px',
'color': 'gray'
})
}).blur(userVaildator); //在jquery或JavaScript中绑定独立函数，不能加（）
//2.密码验证
$('#pwd1').focus(function () {
$('#pwdTip').text('请输入英文或数字，长度在6~8之间').css({
'font-size': '10px',
'color': 'gray'
})
}).blur(pwdVaildator);
//3.确认密码验证
$('#repwd').focus(function () {
$('#repwdTip').text('两次密码输入一致').css({
'color': 'gray',
'font-size': '10px'
})
}).blur(repwdVaildator);
//4.tel验证
$('#tel').focus(function () {
$('#telTip').text('输入常用联系方式').css({
'color': 'gray',
'font-size': '10px'
})
}).blur(telVaildator);
//5.email地址验证
$('#email').focus(function () {
$('#emailTip').text('输入正确的邮箱地址').css({
'color': 'gray',
'font-size': '10px'
})
}).blur(emailVaildator);
3、提交信息、重置信息、删除单项、登录
//提交信息
var rigist = document.getElementById('rigist');
rigist.onclick = function () {
if (userVaildator() && pwdVaildator() && repwdVaildator() && telVaildator() && emailVaildator()) {
$('#rigist').html('成功');
$('#rigist').css({"background": "green"});
var user = document.getElementById('user').value;
var pwd1 = document.getElementById('pwd1').value;
localStorage.setItem(user, pwd1);
fn2();
return true;
} else {
$('#rigist').css({"background": "red"});
$('#rigist').html('失败');
return false;
}
}
//重置信息（全部清除）
var resut = document.getElementById('resut');
resut.onclick=fn2;
function fn2() {
var input = document.getElementById('part2').getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
input[i].value='';
$('#userTip').text('');
$('#pwdTip').text('');
$('#repwdTip').text('');
$('#telTip').text('');
$('#emailTip').text(' ');
$('.divX').attr('style', 'display:none');
$('.divD').attr('style', 'display:none');
$('#rigist').html('提交');
$('#rigist').css({"background": "#488bbf"});
}
}
//单项删除
$("#part2 .divX").each(function(j){
console.log(j)
$("#part2 .divX").index=j;
$("#part2 .divX").eq(j).click(function(){
$(this).attr('style', 'display:none');
$('#part2 input').eq(j).val('');
$('#part2 .bei').eq(j).text('');
})
});
//登录
var gogo = document.getElementById('gogo');
gogo.onclick = function () {
var sum = localStorage.length;
for (var i = 0; i < sum; i++) {
var key = localStorage.key(i);
var value = localStorage.getItem(key);
var user1 = document.getElementById('user1').value;
var pwd2 = document.getElementById('pwd2').value;
if (user1 == key || pwd2 == value) {
$('#gogo').html('成功');
$('#gogo').css({"background": "green"});
window.open("https://www.baidu.com/");
} else {
$('#gogo').css({"background": "red"});
$('#gogo').html('失败');
}
}
}
实现效果：
跳转成功。。。。
Web存储—简易注册登录的更多相关文章
- Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
- Django学习笔记第六篇--实战练习二--简易实现登录注册功能demo
一.绪论: 简易实现登录功能demo,并没有使用默认身份验证模块,所以做的也很差,关闭了csrf保护,没有认证处理cookie和session,只是简单实现了功能.另外所谓的验证码功能是伪的. 二. ...
- 开放平台-web实现QQ第三方登录
应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1 注册成为QQ互联平台开发者,http://connect.qq.com/ 2 准备一个可访问的域名, ...
- web实现QQ第三方登录
开放平台-web实现QQ第三方登录 应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1 注册成为QQ互联平台开发者,http://connect.qq.com ...
- HTML5新增web存储方式
客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间 ①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件: ...
- 8、ABPZero系列教程之拼多多卖家工具 添加手机注册登录功能
现在网站基本都用手机注册,很少用邮箱注册,本篇内容比较多,代码我会尽量加备注,有些操作需要连续添加几个文件才不报错,如果VS显示错误,请继续后续步骤. 前面已经有一篇文章讲到集成短信发送模块:http ...
- vue2.0+koa2+mongodb实现注册登录
前言 前段时间和公司一个由技术转产品的同事探讨他的职业道路,对我说了一句深以为然的话: "不要把自己禁锢在某一个领域,技术到产品的转变,首先就是思维上的转变.你一直做前端,数据的交互你只知道 ...
- web实现QQ第三方登录 开放平台-web实现QQ第三方登录
应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1 注册成为QQ互联平台开发者,http://connect.qq.com/ 2 准备一个可访问的域名, ...
- Node.js搭建简易用户登录
根据学习笔记一的知识点搭建的简易用户注册登录模块,用户数据暂用json保存. HTML: <!DOCTYPE html> <html lang="en" dir= ...
随机推荐
- JAVA - 深入JAVA 虚拟机 3
类的初始化时机 package practise; class Parent{ static int a =3; static{ System.out.println("Parent sta ...
- [LeetCode] Wildcard Matching 题解
6. Wildcard Matching 题目 Implement wildcard pattern matching with support for '?' and '*'. '?' Matche ...
- Django学习（五）---模板扩展，开发博客页面
(一)博客主页面开发 1.模板中可使用for循环,语法格式为: {% for xs in xxs %} HTML语句 {% endfor %} 2.更改app下的views.py, 获取后台model ...
- docker~使用阿里加速器安centos
回到目录 上一篇说了hub.docker.com里拉个镜像太,而阿里云为我们做了不少本国镜像,这样下载的速度就很惊人了,下面看一下在centos7下配置阿里云加速器的方法 打开服务配置文件 vi /e ...
- poj_2186: Popular Cows（tarjan基础题）
题目链接 tarjan参考博客 本文代码参考博客 题意:求在图上可以被所有点到达的点的数量. 首先通过tarjan缩点,将所有内部两两可达的子图缩为一点,新图即为一个有向无环图(即DAG). 在这个D ...
- Java多线程缓存器简单实现
package com.charles.utils; import java.util.HashMap; import java.util.Map; import java.util.concurre ...
- spring AOP原理
spring 实现AOP是依赖JDK动态代理和CGLIB代理实现的.以下是JDK动态代理和CGLIB代理简单介绍 JDK动态代理:其代理对象必须是某个接口的实现,它是通过在运行期间创建一个接口的 ...
- 【css】过度效果
http://kissygalleryteam.github.io/girlLink/doc/demo/index.html
- Android开发之监听器
一直都想进行安卓开发,最近上手了Android.刚开始学习一些基本控件,学习Android就如同进入一个新的世界,印象最深的是这个世界的规则. 最近学习了监听器,对于这个我的一点理解是监听键盘活动 B ...
- C#设计模式总结（转）
一.引言 经过这段时间对设计模式的学习,自己的感触还是很多的,因为我现在在写代码的时候,经常会想想这里能不能用什么设计模式来进行重构.所以,学完设计模式之后,感觉它会慢慢地影响到你写代码的思维方式.这 ...