localStorage注册页面A注册数据在本地储存并在B页面打开

最新推荐文章于 2021-08-25 16:05:13 发布

aoe9670

最新推荐文章于 2021-08-25 16:05:13 发布

阅读量399

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/CYWH/p/10156307.html

版权

如题目的这么一个问题，

A页面代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <link rel="stylesheet" href="signup.css">
  7 </head>
  8 
  9 <body>
 10 <div class="creal">
 11 <div class="title">
 12 </div>
 13 
 14     <div class="title">
 15         <h2>用户注册</h2>
 16     </div>
 17 <div class="container" id="dv">
 18     <div class="body">
 19         <label for="username">用户名:</label><input name="username" type="text" id="username" placeholder="请输入用户名"><span></span><br/>
 20         <label for="pwd">密码:</label><input type="password" name="pwd" id="pwd" placeholder="请输入密码"><span></span><br/>
 21         <label for="e-mail">邮箱:</label><input type="text" id="e-mail" placeholder="请输入邮箱"><span></span><br/>
 22         <label for="telephone">手机号:</label><input type="text" id="telephone" placeholder="请输入手机号"><span></span><br/>
 23         <label for="code_input">验证码:</label><input type="text" id="code_input" placeholder="请输入验证码"><br/>
 24         <div class="button"><label><input type="submit"value="提交" id="my_button" style="width: 50px"></label></div>
 25     </div>
 26 </div>
 27     <div id="v_container" class="yzm"></div>
 28 </div>
 29 
 30 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
 31 
 32 <script src="common.js"></script>
 33 <script src="gVerify.js"></script>
 34 
 35 <script type="text/javascript">
 36   var verifyCode = new GVerify("v_container");
 37     document.getElementById("my_button").onclick = function(){
 38         var res = verifyCode.validate(document.getElementById("code_input").value);
 39         if(res){
 40             //存储信息
 41             var _data = [$("#username").val(), $("#pwd").val(), $("#e-mail").val(), $("#telephone").val()];
 42             localStorage.setItem("data", _data);
 43             console.log(_data);
 44             alert("注册成功");
 45             //var _data = $("#username").val() + "," + $("#pwd").val() + "," + $("#e-mail").val();
 46             window.open("123.html");
 47         }else{
 48             alert("注册失败");
 49         }
 50 
 51     checkuser(document.getElementById("username"),/^[a-zA-Z0-9_-]{4,16}$/);
 52     //密码
 53     checkpwd(my$("pwd"),/^[a-zA-Z0-9_-]{4,16}$/);
 54     //邮箱
 55     checkemail(my$("e-mail"),/^[0-9a    -zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
 56     //座机号码
 57     checktel(my$("telephone"),/^\d{7,20}$/);
 58 
 59     function checkuser(input,reg) {
 60         input.onblur=function () {
 61             if(reg.test(this.value)){
 62                 this.nextElementSibling.innerText="输入正确";
 63                 this.nextElementSibling.style.color="green";
 64             }else{
 65                 this.nextElementSibling.innerText="用户名有误 请输入4-16个英文大小写和数字的组合";
 66                 this.nextElementSibling.style.color="red";
 67             }
 68         };
 69     }
 70 
 71     function checkpwd(input,reg) {
 72         input.onblur=function () {
 73             if(reg.test(this.value)){
 74                 this.nextElementSibling.innerText="输入正确";
 75                 this.nextElementSibling.style.color="green";
 76             }else{
 77                 this.nextElementSibling.innerText="密码有误 请输入4-16个英文大小写和数字的组合";
 78                 this.nextElementSibling.style.color="red";
 79             }
 80         };
 81     }
 82 
 83     function checkemail(input,reg) {
 84         input.onblur=function () {
 85             if(reg.test(this.value)){
 86                 this.nextElementSibling.innerText="输入正确";
 87                 this.nextElementSibling.style.color="green";
 88             }else{
 89                 this.nextElementSibling.innerText="输入邮件有误 邮件格式为xx@xx.com";
 90                 this.nextElementSibling.style.color="red";
 91             }
 92         };
 93     }
 94 
 95     function checktel(input,reg) {
 96         input.onblur=function () {
 97             if(reg.test(this.value)){
 98                 this.nextElementSibling.innerText="输入正确";
 99                 this.nextElementSibling.style.color="green";
100             }else{
101                 this.nextElementSibling.innerText="手机号为11个纯数字组合";
102                 this.nextElementSibling.style.color="red";
103             }
104         };
105     }
106 </script>
107 
108 </body>
109 </html>

B页面获取数据并显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
</head>
<style>
    body{
        margin: 0 auto;
        width: 1060px;
        text-align: center;
    }
    h2{
        text-align: center;
    }
</style>
<body>

<h2>用户信息</h2>
<script>
    //获取信息
    var _data = localStorage.getItem("data", _data);

    if (localStorage.getItem("data") != null) {
         _data = _data.split(",");
        document.write("用户名:");
        document.write("<br>");
        document.write(_data[0]);
        document.write("<br>");
        document.write("密码:");
        document.write("<br>");
        document.write(_data[1]);
        document.write("<br>");
        document.write("邮箱:");
        document.write("<br>");
        document.write(_data[2]);
        document.write("<br>");
        document.write("座机号:");
        document.write("<br>");
        document.write(_data[3]);
        document.write("<br>");

        //清空数据
        localStorage.removeItem("data");
      }else{ 
              alert('数据不存在，请登录')
      }

</script>
</body>
</html>