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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
封装好的省市地区联动控件附下载
Aug 13 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
JavaScript实现select添加option
Jul 03 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue抽出组件并传值实例
Jul 31 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
php5 mysql分页实例代码
2008/04/10 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
JavaScript基础心法 数据类型
2018/03/05 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python程序设计入门(1)基本语法简介
2014/06/13 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
Java语言的优势
2015/01/10 面试题
心得体会怎么写
2013/12/30 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
食品流通安全承诺书
2014/05/22 职场文书
学位证书委托书
2014/09/30 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
欠条格式范本
2015/07/03 职场文书
python基础之模块的导入
2021/10/24 Python
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS
Java中API的使用方法详情
2022/04/06 Java/Android