如题目的这么一个问题，

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. NormalMap原理详细解析

    NormalMap的实现标志着对渲染流水线的各个环节以及矩阵变化有了正确和深入的认识.这里记录一下学习过程,以及关于NormalMap的诸多细节. 刚开始想要实现NormalMap程序的时候,查阅的是 ...

  2. ie高版本浏览器不支持velocity的问题解决

    <head><meta http-equiv="X-UA-Compatible" content="IE=5"></head> ...

  3. MyEclipse文件查找技巧

    只为成功找方法,不为失败找借口! MyEclipse使用总结——MyEclipse文件查找技巧 一.查找文件 使用快捷键[ctrl+shift+R]弹出弹出文件查找框,如下图所示: 二.查找包含某个字 ...

  4. Shell编程-02-Shell变量

    目录 什么是Shell变量 变量类型 环境变量初始化及其对应文件的生效顺序 什么是Shell变量     在初等数学数学方程式中,我们会经常碰到类似于这样的方程式:y=x+1 ,等号左右两边的x和y称 ...

  5. Vivado 2017封装自定义IP Core

    使用Vivado2017.3自定义IP Core.通常情况下,我们做设计采用模块化设计,对于已经设计好的一部分模块功能,就可以直接拿来调用,IP Core就是这样来的,一般来说我们看不到IP Core ...

  6. CodeForces 572D Minimization(DP)

    题意翻译 给定数组AAA 和值kkk ,你可以重排AAA 中的元素,使得∑i=1n−k∣Ai−Ai+k∣\displaystyle\sum_{i=1}^{n-k} |A_i-A_{i+k}|i=1∑n ...

  7. 45 Useful JavaScript Tips, Tricks and Best Practices

    <45 Useful JavaScript Tips, Tricks and Best Practices> http://flippinawesome.org/2013/12/23/45 ...

  8. 使用Jenkins容器构建时，关于maven项目settings.xml的位置

    切记切记:必须要放在 /root/.m2/settings.xml,要不然Jenkins容器中执行mvn命令时settings会不生效

  9. 什么是ODBC和JDBC?

    jdbc是使用通过JAVA的数据库驱动直接和数据库相连,而jdbc-odbc连接的是ODBC的数据源,真正与数据库建立连接的是ODBC! 建议使用JDBC直接连接,同时最好使用连接池! JDBC 是 ...

  10. C#——Socket

    最近公司让我搞个socket小程序(服务端). 主要的功能:客户端发字符串到服务端,服务端接收后在界面上显示. 参照了网上许多代码,自己从中修改整理代码. public Form4() { Initi ...