如题目的这么一个问题，

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. PHP半年了，已经可以独立支撑项目，几点心得记录

    从去年12开始零基础学习PHP,到现在可以独立支撑项目,感谢PHP的强大,成熟.入门容易,记录几点心得: 1.思维比什么都重要,方法要靠实践证明: 2.多写.多试,不要怕遇到坑,每一个坑都是你前进路上 ...

  2. linux git server 简易搭建 （ssh访问）

    git的服务器搭建,如果无需权限控制,仅团队内部使用,初始化一个服务器仓库,其他人通过ssh访问这个文件夹即可.如需复杂的管理,建议使用gitlab. yum install git -y id gi ...

  3. 一次清理Hbase的oldWALs的过程

    HBase版本:1.3.1 Hadoop版本:2.7.1 Zookeeper版本:3.4.6 --------------------------------- 检查线上业务系统的磁盘空间, 发现HD ...

  4. genymotion的安装

    1.安装virtualBox google的模拟器是运行在qemu上面的. genymotion这个模拟器运行在virtualBox上面.

  5. JavaScript 操作对象属性(设置属性, setter/getter, 序列化)

    参考自<<JavaScript权威指南 第6版>>, 文字太多反而不易理清其中的关系, 直接上代码和注释 /* * 对象的setter和getter属性: * 定义为一个或者两 ...

  6. Djanjo 的app 模板路径 静态文件 完整版登录 新手三件套 以及orm

    一: django中app的概念: 一个项目可以包含多个应用(app,类似于模块,主页打开多个模块就是多个app) 创建了app,要在配置文件中注册 二:模板路径配置: 1 templates文件夹 ...

  7. KbmMW 4.40.00 测试发布

    经过漫长的等待,支持移动开发的kbmmw 4.40.00 终于发布了,这次不但支持各个平台的开发, 而且增加了认证管理器等很多新特性,非常值得升级.具体见下表. 4.40.00 BETA 1 Oct ...

  8. 3D 相关

    1. STL 2. AMF 3. X3D 网址: http://www.web3d.org/x3d-resources/content/examples/X3dResources.html

  9. 今天踩过的坑——structs和mysql

    1 在action中写了interceptor-ref就不会用defaultStack啦.得自己补上2 继承CookiesAware是不够的,得在action中配置一下 <interceptor ...

  10. Android Activity 无法获取组件尺寸

    Activity 创建的时候,可能在 onCreate 的时刻,窗口 Window 对象的创建还未完成. 那么最合适的时机是什么呢?答案是:onWindowFocusChanged.这个方法在 Act ...