如题目的这么一个问题，

A页面代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" href="signup.css">

 </head>

 <body>

 <div class="creal">

 <div class="title">

 </div>

     <div class="title">

         <h2>用户注册</h2>

     </div>

 <div class="container" id="dv">

     <div class="body">

         <label for="username">用户名:</label><input name="username" type="text" id="username" placeholder="请输入用户名"><span></span><br/>

         <label for="pwd">密码:</label><input type="password" name="pwd" id="pwd" placeholder="请输入密码"><span></span><br/>

         <label for="e-mail">邮箱:</label><input type="text" id="e-mail" placeholder="请输入邮箱"><span></span><br/>

         <label for="telephone">手机号:</label><input type="text" id="telephone" placeholder="请输入手机号"><span></span><br/>

         <label for="code_input">验证码:</label><input type="text" id="code_input" placeholder="请输入验证码"><br/>

         <div class="button"><label><input type="submit"value="提交" id="my_button" style="width: 50px"></label></div>

     </div>

 </div>

     <div id="v_container" class="yzm"></div>

 </div>

 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>

 <script src="common.js"></script>

 <script src="gVerify.js"></script>

 <script type="text/javascript">

   var verifyCode = new GVerify("v_container");

     document.getElementById("my_button").onclick = function(){

         var res = verifyCode.validate(document.getElementById("code_input").value);

         if(res){

             //存储信息

             var _data = [$("#username").val(), $("#pwd").val(), $("#e-mail").val(), $("#telephone").val()];

             localStorage.setItem("data", _data);

             console.log(_data);

             alert("注册成功");

             //var _data = $("#username").val() + "," + $("#pwd").val() + "," + $("#e-mail").val();

             window.open("123.html");

         }else{

             alert("注册失败");

         }

     checkuser(document.getElementById("username"),/^[a-zA-Z0-9_-]{4,16}$/);

     //密码

     checkpwd(my$("pwd"),/^[a-zA-Z0-9_-]{4,16}$/);

     //邮箱

     checkemail(my$("e-mail"),/^[0-9a    -zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);

     //座机号码

     checktel(my$("telephone"),/^\d{7,20}$/);

     function checkuser(input,reg) {

         input.onblur=function () {

             if(reg.test(this.value)){

                 this.nextElementSibling.innerText="输入正确";

                 this.nextElementSibling.style.color="green";

             }else{

                 this.nextElementSibling.innerText="用户名有误 请输入4-16个英文大小写和数字的组合";

                 this.nextElementSibling.style.color="red";

             }

         };

     }

     function checkpwd(input,reg) {

         input.onblur=function () {

             if(reg.test(this.value)){

                 this.nextElementSibling.innerText="输入正确";

                 this.nextElementSibling.style.color="green";

             }else{

                 this.nextElementSibling.innerText="密码有误 请输入4-16个英文大小写和数字的组合";

                 this.nextElementSibling.style.color="red";

             }

         };

     }

     function checkemail(input,reg) {

         input.onblur=function () {

             if(reg.test(this.value)){

                 this.nextElementSibling.innerText="输入正确";

                 this.nextElementSibling.style.color="green";

             }else{

                 this.nextElementSibling.innerText="输入邮件有误 邮件格式为xx@xx.com";

                 this.nextElementSibling.style.color="red";

             }

         };

     }

     function checktel(input,reg) {

         input.onblur=function () {

             if(reg.test(this.value)){

                 this.nextElementSibling.innerText="输入正确";

                 this.nextElementSibling.style.color="green";

             }else{

                 this.nextElementSibling.innerText="手机号为11个纯数字组合";

                 this.nextElementSibling.style.color="red";

             }

         };

     }

 </script>

 </body>

 </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>

这个也可以归结为是localStorage的使用方法来解决的，很困了，先写这么多了。

localStorage注册页面A注册数据在本地储存并在B页面打开的更多相关文章

  1. H5页面 用户启动无痕浏览本地储存 localstorage 清楚数据

    移动端开发时,如果用户浏览器启用了无痕浏览,那么本地存储信息就会失效,会导致页面信息报错 解决办法: 先判断是否能适用 localStorage.setItem 如果不行在适用  cookie coo ...

  2. 临时存存储页面上的数据---Web存储

    HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考: http://www.cnblogs.com/taoweiji/archive/2012/12/0 ...

  3. <<< html5本地储存

    类似与Cookies,但由于Cookies储存量太小,大小也只有4-5KB的样子,html5的本地储存能存5M大小的数据 html5本地储存属性有,localStorage和sessionStorag ...

  4. 微信小程序之 页面跳转 及 调用本地json的假数据调试

    一.微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: (1)在wxml页面中: <navigator url="../index/index"> ...

  5. 八、React实战：可交互待办事务表（表单使用、数据的本地缓存local srtorage、生命同期函数（页面加载就会执行函数名固定为componentDidMount()））

    一.项目功能概述 示例网址:http://www.todolist.cn/ 功能: 输入待做事项,回车,把任务添加到 [正在进行] [正在进行] 任务,勾选之后,变成已[经完成事项] [已完成事务], ...

  6. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  7. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  8. Spring Cloud Eureka源码分析之服务注册的流程与数据存储设计！

    Spring Cloud是一个生态,它提供了一套标准,这套标准可以通过不同的组件来实现,其中就包含服务注册/发现.熔断.负载均衡等,在spring-cloud-common这个包中,org.sprin ...

  9. JS页面刷新保持数据不丢失

    转自:https://blog.csdn.net/qq_32439101/article/details/78134877 下面是 DOM Storage 的接口定义: interface Stora ...

随机推荐

  1. Java 设计模式系列（二二）责任链模式

    Java 设计模式系列(二二)责任链模式 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求 ...

  2. SQLServer函数 left()、charindex()、stuff()的使用

    1.left() LEFT (<character_expression>, <integer_expression>)   返回character_expression 左起 ...

  3. openfire搭建spackweb在线即时聊天

    1.首先去openFire官网下载openFire以及spackweb,以下地址可以2样东西一次打包下载.http://download.csdn.net/detail/a315157973/8048 ...

  4. Android-MediaPlayer-音频播放-异步准备

    在上一篇博客,Android-MediaPlayer-音频播放-普通准备,介绍了普通准备的播放: 一般在开发中,要使用异步准备比较好,因为准备是要去准备硬件来播放,是耗性能的 异步准备和普通准备的区别 ...

  5. Github注册及心得

    注册Github流程: 1.搜索www.github.com 2.有两个按钮sign up(注册).sign in(登入)

  6. 国际时区 TimeZone ID列表

    public static void main(String[] args) { Calendar c = new GregorianCalendar(); c.setTime(new Date()) ...

  7. 简明的sql优化

    网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 这篇文章我花费了大量的时间查找资料.修改.排版,希望大家阅读之后,感觉 ...

  8. Linux Redis 开机启动

    通过初始化脚本启动Redis 在Redis源代码目录的utils文件夹中有一个名为redis_init_script的初始化脚本文件.需要配置Redis的运行方式和持久化文件.日志文件的存储位置.步骤 ...

  9. 多次grep 没有看到输出

    tail -f xxx.log | grep aaaa | grep bbbb 发现没有日志输出 但log中的那条记录包含aaaa 和 bbbb,就是说tail  -f xxx.log | grep ...

  10. shell中调用jenkins API批量运行历史任务

    shell中调用jenkins API批量运行jenkins带参数的任务: #!/bin/sh #startdate=20150127 startdate=20150201 while [ " ...