java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...
由于之前面试,被问到过此问题,所以今天特意整理了一下。由于自己技术水平有限,若存在错误,欢迎提出批评。
本博客整理了两种方式从一个页面层向另一个页面层传递参数。
一. 通过cookie方式
1. 传递cookie页面的html,此处命名为a.html
请输入用户名和密码:
设置
传递cookie
删除
2.a.html的js代码
//设置cookie
var setCookie = function (name, value, day) {
//当设置的时间等于0时,不设置expires属性,cookie在浏览器关闭后删除
var expires = day * 24 * 60 * 60 * 1000;
var exp = new Date();
exp.setTime(exp.getTime() + expires);
document.cookie = name + "=" + value + ";expires=" + exp.toUTCString();
};
//删除cookie
var delCookie = function (name) {
setCookie(name, ' ', -1);
};
//传递cookie
function login() {
var name = document.getElementById("userName");
var pass = document.getElementById("passwords");
setCookie('userName',name.value,7)
setCookie('password',pass.value,7);
location.href = 'b.html'
}
function deletecookie() {
delCookie('userName',' ',-1)
}
3. 接受cookie的页面,此处定义为b.html
获取
4. b.html的js代码
//获取cookie代码
var getCookie = function (name) {
var arr;
var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)){
return arr[2];
}
else
return null;
};
//点击获取按钮之后调用的函数
function getcookie() {
console.log(getCookie("userName"));
console.log(getCookie("password"))
}
二. 通过url传递参数的方式
该案例也是从a.html向b.html页面传递参数
1. a.html的代码
跳转
2.点击跳转按钮可以将input标签的value值传递到b.html
function jump() {
var s = document.getElementsByTagName('input')[0];
location.href='7.获取参数.html?'+'txt=' + encodeURI(s.value);
}
3. b.html中的代码
var loc = location.href;
var n1 = loc.length;
var n2 = loc.indexOf('=');
var txt = decodeURI(loc.substr(n2+1,n1-n2));
var box = document.getElementById('box');
box.innerHTML = txt;
三.通过localStorage
通过localStorage传递参数类似cookie。但是要注意:要访问一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。
1. a.html中的js文件
//将localStorage传递到哪个页面
location.href = 'b.html'
//设置localStorage
window.localStorage.setItem('user','haha');
2.b.html中的文件
获取
function getcookie() {
//获取传递过来的localStorage
console.log(window.localStorage.getItem('user'))
}
总结
以上所述是小编给大家介绍的JS实现把一个页面层数据传递到另一个页面的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...相关推荐
- vue编写一个登录页面,使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
- java json 对象如何对属性排序_Java对象集合、对象数组如何排序?你需要知道这两种方式...
一.引子 在比较Java对象时,正常情况下,我们只能使用==或!=进行比较,而不能使用>或者<这样的运算符. 那么问题来了,开发过程中我们经常要对多个对象排序,排序必然需要比较,那么如何实 ...
- 向服务器端提交数据的两种方式
朴素版: ...
- java get和post请求参数设置,Get和Post两种方式向指定地址提交表单
做Java做了很多年,却总是把一些东西遗忘,过后再着急的找寻.最近,需要通过Java代码模拟一个表单提交,却怎么也想不起来如何封装数据了. 本篇主要描述Java网络参数传递,主要分为get和post两 ...
- android数据回传多个页面_Android菜鸟起飞|使用Intent实现Activity跳转的两种方式(无回传数据和有回传数据)...
使用Intent实现Activity跳转的两种方式 1. 使用startActivity(intnet)方法实现无回传数据的Activity跳转: 使用方法: 为实现跳转动作的控件绑定监听器,在点击事 ...
- Android页面数据传递的两种方式
在android中实现页面中数据的传递有两种方式: 1:第一种数据传递的方式是通过inputExtra方法来进行数据的传递的 2:第二中方法是通过bundle的方法来实现数据的传递的 接下来我们首先来 ...
- JAVA与PLC通讯读取数据(两种方式)
第一种方式(s7connector) S7官网:S7Connector - Documentation,有简单的读写操作参考. 1.创建maven工程引入依赖 <dependency>&l ...
- java语言:创建一个二维数组,将古诗《春晓》的内容赋值于二维数组,然后分别用横版和竖版两种方式输出。
问题:创建一个二维数组,将古诗<春晓>的内容赋值于二维数组,然后分别用横版和竖版两种方式输出. 前两天上java课的时候老师,给我们出了这道题.要求:要用java语言来写. 根据要求创建的 ...
- jsp页面数据加载的两种方式
JSP数据加载的两种方式 第一种: 三层架构写在controller的页面跳转前面,set到request域中 request.setAttribute("name", list) ...
最新文章
- GAN:「太难的部分我就不生成了,在下告退」
- 美国专利商标局发布人工智能专利扩散分析报告
- 单碟1.75T 西数14TB充氦硬盘今年上
- 云南计算机专修学校附中,昆明高中哪家强? 师附中和昆一中高考尖子生最多...
- django-模板的母版与子版
- 网络编程:TCP实现文件上传
- Cloudera Manager 5和CDH5(最新版5.1.3) 安装
- python中numpy的用法_Python中numpy多维数组的用法
- 浏览器一直不停的异步请求(环境:vs.net mvc)
- char强制类型转换为int_为强制类型转换正名
- atoi的实现和 字符指针数组
- Day2:360培训学习重点笔记(7.14)
- android 重复申请权限,去除AndroidManifest.xml里重复申请的权限(uses-permission)
- erp服务器慢_ERP系统服务器维护经验谈
- windows启动管理器_把windows 10装进文件里,竟然也能启动
- pg数据库中读取json
- codeblock图形界面编程(二)
- unity——三维GIS效果
- 第19篇:WEB漏洞~SQL注入~SqlMap绕过WAF
- LC Uniboot相比于常规的LC光纤连接器有什么特点?
热门文章
- 一次SQLSERVER触发器编写感悟
- 多路复用select和epoll的区别(转)
- Redhat 6.3 yum 本地源配置
- html javascript 引号
- 2. Web Dynpro for ABAP :Component Controller
- 多域名虚拟空间及DNS配置
- 解决“QGtkStyle could not resolve GTK……”问题
- [转]解决STM32开启定时器时立即进入一次中断程序问题
- ASP.NET一般处理程序新建一个方法里使用context.Response.Write的解决方法
- 表单界面的兼容PC手机端解决方案