localStorage注册页面A注册数据在本地储存并在B页面打开
如题目的这么一个问题，
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页面打开的更多相关文章
- H5页面 用户启动无痕浏览本地储存 localstorage 清楚数据
移动端开发时,如果用户浏览器启用了无痕浏览,那么本地存储信息就会失效,会导致页面信息报错 解决办法: 先判断是否能适用 localStorage.setItem 如果不行在适用 cookie coo ...
- 临时存存储页面上的数据---Web存储
HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考: http://www.cnblogs.com/taoweiji/archive/2012/12/0 ...
- <<< html5本地储存
类似与Cookies,但由于Cookies储存量太小,大小也只有4-5KB的样子,html5的本地储存能存5M大小的数据 html5本地储存属性有,localStorage和sessionStorag ...
- 微信小程序之 页面跳转 及 调用本地json的假数据调试
一.微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: (1)在wxml页面中: <navigator url="../index/index"> ...
- 八、React实战：可交互待办事务表（表单使用、数据的本地缓存local srtorage、生命同期函数（页面加载就会执行函数名固定为componentDidMount()））
一.项目功能概述 示例网址:http://www.todolist.cn/ 功能: 输入待做事项,回车,把任务添加到 [正在进行] [正在进行] 任务,勾选之后,变成已[经完成事项] [已完成事务], ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- Spring Cloud Eureka源码分析之服务注册的流程与数据存储设计！
Spring Cloud是一个生态,它提供了一套标准,这套标准可以通过不同的组件来实现,其中就包含服务注册/发现.熔断.负载均衡等,在spring-cloud-common这个包中,org.sprin ...
- JS页面刷新保持数据不丢失
转自:https://blog.csdn.net/qq_32439101/article/details/78134877 下面是 DOM Storage 的接口定义: interface Stora ...
随机推荐
- 我大中华微软MVP中国区人才库（转）
出处:http://www.genshuixue.com/i-cxy/p/15349735 刘海峰:国内知名微软开源技术网站51Aspx 创始人,十年以上的asp.net从业经验,微软MSDN特约讲师 ...
- Workflow笔记2——状态机工作流（转）
出处:http://www.cnblogs.com/jiekzou/p/6192813.html 在上一节Workflow笔记1——工作流介绍中,介绍的是流程图工作流,后来微软又推出了状态机工作流,它 ...
- CodeForces 687B Remainders Game(数学，最小公倍数)
题意:给定 n 个数,一个数 k,然后你知道一个数 x 取模这个 n 个的是几,最后问你取模 k,是几. 析:首先题意就看了好久,其实并不难,我们只要能从 n 个数的最小公倍数是 k的倍数即可,想想为 ...
- S5PV210定时器
在S5PV210内部,一共有4类定时器件.这4类定时器件的功能.特征是不同的. 1.PWM定时器(1)这种是最常用的,平时所说的定时器一般指的是这个.像简单单片机(譬如51单片机)中的定时器也是这类. ...
- CPU位数、地址线位数、数据线位数、通用寄存器位数！
CPU位数:表示的是其通用寄存器的位数,CPU的位数表示该CPU一次处理数据的最大位数. 数据线位数:是CPU的理论最大寻址空间,也是CPU与内存之间一次最大的数据传输位数. 地址线位数:是CPU实际 ...
- Lucene4：获取中文分词结果，根据文本计算boost
1. 要求 环境: Lucene 4.1版本/IKAnalyzer 2012 FF版本/mmseg4j 1.9版本 实现功能: 1).给定输入文本,获取中文拆分词结果:2).给定输入文本,对该文本按一 ...
- 仿微信聊天面板制作 javascript
先上图吧 , 点击头像更换说话对象,简单说下实现原理,html中创建一个ul用于存放所有说话的内容,对话内容是有javascript 动态生成, 主要难点:先布局好css,当时奥巴马发送时候,让这个l ...
- HTML5 SSE 数据推送应用开发
javascript表达行为,css表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...
- Luogu1438 无聊的数列（单点查询）&&加强版（区间查询）
题目链接:戳我 线段树中差分和前缀和的应用 其实对于加上等差数列的操作我们可以分成这样三步-- update(1,1,n,l,l,k); if(r>l) update(1,1,n,l+1,r,d ...
- Oracle数据库01
常用函数 COUNT(*):统计所有的数据量,没有过滤功能 COUNT(字段):统计出指定字段不为null的数据量,有过滤功能 COUNT(DISTINCT 字段):统计指定字段不为空并且去掉重复数据 ...