如题目的这么一个问题，

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. Groovy使用List集合

    获取List集合中的元素 def lst = [1,3,4,1,8,9,2,6] println lst[-1] println lst[-2] 输出结果: 输出: 6 2 使用Range(范围)对象 ...

  2. Gym 101201I Postman (贪心)

    题意:有个邮递员,要送信,每次最多带 m 封信,有 n 个地方要去送,每个地方有x 封要送,每次都到信全送完了,再回去,对于每个地方,可以送多次直到送够 x 封为止. 析:一个很简单的贪心,就是先送最 ...

  3. Java® Language Specification

    Java™ Platform, Standard Edition 8 API Specification http://docs.oracle.com/javase/8/docs/api/ The J ...

  4. 洛谷 P1967 货车运输(克鲁斯卡尔重构树)

    题目描述 AAA国有nn n座城市,编号从 11 1到n nn,城市之间有 mmm 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 qqq 辆货车在运输货物, 司机们想知道每辆车在不超过车 ...

  5. Java对象和XML转换

    有时候,我们需要把Java对象转换成XML文件.这时可以用JAXB来实现.(JDK1.6及以后的版本无需导入依赖包,因为已经包含在JDK里了) 假如某个公司有许多部门,每个部门有许多职员,我们可以这样 ...

  6. [label][javascript-Unit Test][JSLint]A Guide To JSLint Messages

    原文链接: http://www.jameswiseman.com/blog/2011/03/26/coding-convention-an-style-guide/ http://www.james ...

  7. 转：Entity FrameWork利用Database.SqlQuery<T>执行存储过程并返回参数

    public IEnumerable<Statistic> GetStatistics(IEnumerable<Guid> itemIds) { var ctx = new D ...

  8. django设置cookie和session

    1 设置cookie 本例中应用名称为cookie 模型model from django.db import models from django.db import models class Us ...

  9. Visual Studio 2017（VS2017） 企业版 Enterprise 注册码

    Visual Studio 2017(VS2017) 企业版 Enterprise 注册码:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF 终于等到你,最强 IDE Visual Stud ...

  10. #测试框架推荐# test4j，数据库测试

    # 背景 后端都是操作DB的,这块的自动化测试校验的话,是需要数据库操作的,当然可以直接封装方法来操作数据,那么有没有开源框架支持数据操作,让我们关注写sql语句?或者帮我们做mysql的断言呢? # ...