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= ...
随机推荐
- 使用Webpack加速Vue.js应用的4种方式
Webpack是开发Vue.js单页应用程序的重要工具. 通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能. 其中介绍下面四种方式: 单个文件组件 优化Vue构建 浏览器 ...
- ansible的安装
安装 ansible-server的安装 client需要有python2.5以上 的python server和client都关闭了selinux server端: 网址: http://www.a ...
- HashMap源码浅析(jdk1.8)
HashMap是以key-value键值对的形式进行存储数据的,数据结构是以数组+链表或红黑树实现. 数据结构图如下: 一.关键属性 HashMap初始化和方法使用的属性. /** * 默认初始容量1 ...
- 设置TrackMouseEvent捕获WM_MOUSEHOVER和WM_MOUSELEAVE消息
WM_MOUSEHOVER(非客户区消息为WM_NCMOUSEHOVER)消息表示鼠标在客户区悬浮消息,WM_MOUSELEAVE(非客户区消息为WM_NCMOUSELEAVE)为鼠标离开客户区消息, ...
- Android_65535问题的解决
做过比较大的项目的人都知道,当app大到一定程度的时候,会出现65535这个错误,也就是64K,也就是,一个app包中,方法数不能超过65535个,超过了就要分成多个dex包,这个别问为什么,andr ...
- 【转载】BAT 批处理脚本教程
来源:http://www.cnblogs.com/glaivelee/archive/2009/10/07/1578737.html BAT 批处理脚本 教程 第一章 批处理基础第一节 常用批处 ...
- Java并发包基石-AQS详解
目录 1 基本实现原理 1.1 如何使用 1.2 设计思想 2 自定义同步器 2.1 同步器代码实现 2.2 同步器代码测试 3 源码分析 3.1 Node结点 3.2 独占式 3.3 共享式 4 总 ...
- 游戏里的动态阴影-ShadowMap实现原理
ShadowMap是比较流行的实时阴影实现方案,原理比较简单,但真正实现起来还是会遇到很多问题的,我这里主要记录下实现方式 先看效果 凹凸地形上也有阴影 实现原理 ShadowMap技术是从灯光空间用 ...
- java调用wkhtmltopdf生成pdf文件，美观，省事
最近项目需要导出企业风险报告,文件格式为pdf,于是搜了一大批文章都是什么Jasper Report,iText ,flying sauser ,都尝试了一遍,感觉不是我想要的效果, 需要自己调整好多 ...
- 【YII】Yii入门
1. 入门博客 http://blog.csdn.net/zm2714/article/category/1359776/2 2. 创建运行demo http://blog.csdn.net/zhou ...