JS实现把一个页面层数据传递到另一个页面的两种方式


Posted in Javascript onAugust 13, 2018

由于之前面试,被问到过此问题,所以今天特意整理了一下。由于自己技术水平有限,若存在错误,欢迎提出批评。

本博客整理了两种方式从一个页面层向另一个页面层传递参数。

一. 通过cookie方式

1. 传递cookie页面的html,此处命名为a.html

请输入用户名和密码:

<input id="userName" type="text" />
<input id="passwords" type="password" />
<button id="btn">设置</button>
<button onclick="login()">传递cookie</button>
<button onclick="deletecookie()">删除</button>

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

<button onclick="getcookie()">获取</button>

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的代码

<input type="text" value="猜猜我是谁">
<button onclick="jump()">跳转</button>

2.点击跳转按钮可以将input标签的value值传递到b.html

function jump() {
  var s = document.getElementsByTagName('input')[0];
  location.href='7.获取参数.html?'+'txt=' + encodeURI(s.value);
}

3. b.html中的代码

<div id="box"></div>
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中的文件

<button onclick="getcookie()">获取</button>
function getcookie() {
  //获取传递过来的localStorage
  console.log(window.localStorage.getItem('user'))
}

总结

以上所述是小编给大家介绍的JS实现把一个页面层数据传递到另一个页面的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 #Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 #Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 #Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 #Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 #Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 #Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 #Javascript
You might like
php时间不正确的解决方法
2008/04/09 PHP
php中大括号作用介绍
2012/03/22 PHP
在PHP中使用redis
2013/11/04 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
python实现通过shelve修改对象实例
2014/09/26 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python可迭代对象操作示例
2019/05/07 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
指针和引用有什么区别
2013/01/13 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
检察官就职演讲稿
2014/01/13 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
协会周年庆活动方案
2014/08/26 职场文书
2014年司机工作总结
2014/11/21 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python