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 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 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代码的53条建议
2008/03/27 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP count()函数讲解
2019/02/03 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
深入理解node.js http模块
2018/01/24 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
浅谈微信小程序flex布局基础
2018/09/10 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
js常见遍历操作小结
2019/06/06 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
python实现数据库跨服务器迁移
2018/04/12 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
Python Django搭建网站流程图解
2020/06/13 Python
优秀护士获奖感言
2014/02/20 职场文书
技术合作协议书范本
2014/04/18 职场文书
先进个人材料怎么写
2014/12/30 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
利用js实现简单开关灯代码
2021/11/23 Javascript