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= ...
随机推荐
- CentOS 6.9 升级MySQL 5.6.36到5.7.18
CentOS 6.9 升级MySQL 5.6.36到5.7.18 MySQL 5.6.36 安装过程:http://www.cnblogs.com/imweihao/p/7156754.html 升级 ...
- frames.contentWindow.document InvalidCastException 转换错误异常。
http://bbs.csdn.net/topics/210027068 和 https://bytes.com/topic/c-sharp/answers/248557-threading-pr ...
- 如何在java中用Arraylist中实现冒泡排序的问题
众所周知,冒泡排序法在一般数组中就3步, if(a<b){ temp=a; a=b; b=temp; } 然而,在集合中就不是简单的交换一下了,因为交换之后,必须保证新的值被重新设置到集合中去. ...
- MySQL · 引擎特性 · InnoDB奔溃恢复
前言 数据库系统与文件系统最大的区别在于数据库能保证操作的原子性,一个操作要么不做要么都做,即使在数据库宕机的情况下,也不会出现操作一半的情况,这个就需要数据库的日志和一套完善的奔溃恢复机制来保证.本 ...
- codeforces 129B students and shoes
https://vjudge.net/problem/CodeForces-129B 题意: 有n个学生,他们之间被鞋带缠住了.现在,老师首先把所有只与一个学生直接相连的学生找出来,让他们聚集到一起, ...
- UglyNumber - 找“丑数”
uglynumber的定义是只能被1,2,3,5整除的数 规定1是第一个uglynumber:以此类推,1 2 3 4 5 6 8 9 10 12 15 16 18 20 24 25 27 30 32 ...
- zoj 3963 heap partion
https://vjudge.net/problem/ZOJ-3963 题意: 给出一个数列,可以用这个数列构造一种二叉树,这个二叉树满足数的下标 i <= j,并且 si <= sj,s ...
- （转）spring学习之@ModelAttribute运用详解
@ModelAttribute使用详解 1 @ModelAttribute注释方法 例子(1),(2),(3)类似,被@ModelAttribute注释的方法会在此controller每个方法执行前被 ...
- HDOJ2001-两点坐标的距离
Problem Description 输入两点坐标(X1,Y1),(X2,Y2),计算并输出两点间的距离. Input 输入数据有多组,每组占一行,由4个实数组成,分别表示x1,y1,x2,y2 ...
- 【基础网络】TCP与UDP 的区别
TCP协议与UDP协议的区别 首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP协议的区别,我觉得这是没有从本质上弄清楚网络通信! ...