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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
layUI实现前端分页和后端分页
Jul 27 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中的常用函数回顾
2013/07/11 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
django2 快速安装指南分享
2018/01/05 Python
python conda操作方法
2019/09/11 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
指针和引用有什么区别
2013/01/13 面试题
文化宣传方案
2014/03/13 职场文书
空气的环保标语
2014/06/12 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
慰问信模板
2015/02/14 职场文书
React更新渲染原理深入分析
2022/12/24 Javascript