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">登&nbsp;录</div>
 5           <div id="btn22">注&nbsp;册</div>
 6           <div id="part1" >
 7             <div id="for11">
 8               <span><span style="color: red">*&nbsp;</span>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</span><input type="text" id="user1" />
 9               <div id="user1Tip"></div>
10             </div>
11             <div id="for22">
12               <span><span style="color: red">*&nbsp;</span>密&emsp;&emsp;码：</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">*&nbsp;</span>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</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">*&nbsp;</span>密&emsp;&emsp;码：</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">*&nbsp;</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">*&nbsp;</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">*&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&emsp;
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('失败');
         }
       }
     }

实现效果：

跳转成功。。。。