好资源导航 » 文章资讯 » JS实现把一个页面层数据传递到另一个页面的两种方式

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

2023-09-09 02:08:07 58

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

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

一.通过cookie方式

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

请输入用户名和密码：



设置
传递cookie
删除

2.a.html的js代码

//设置cookie
varsetCookie=function(name,value,day){
//当设置的时间等于0时，不设置expires属性，cookie在浏览器关闭后删除
varexpires=day*24*60*60*1000;
varexp=newDate();
exp.setTime(exp.getTime()+expires);
document.cookie=name+"="+value+";expires="+exp.toUTCString();
};
//删除cookie
vardelCookie=function(name){
setCookie(name,'',-1);
};
//传递cookie
functionlogin(){
varname=document.getElementById("userName");
varpass=document.getElementById("passwords");
setCookie('userName',name.value,7)
setCookie('password',pass.value,7);
location.href='b.html'
}
functiondeletecookie(){
delCookie('userName','',-1)
}

3.接受cookie的页面，此处定义为b.html

获取

4.b.html的js代码

//获取cookie代码
vargetCookie=function(name){
vararr;
varreg=newRegExp("(^|)"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
returnarr[2];
}
else
returnnull;
};
//点击获取按钮之后调用的函数
functiongetcookie(){
console.log(getCookie("userName"));
console.log(getCookie("password"))
}

二.通过url传递参数的方式

该案例也是从a.html向b.html页面传递参数

1.a.html的代码


跳转

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

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

3.b.html中的代码

varloc=location.href; varn1=loc.length; varn2=loc.indexOf('='); vartxt=decodeURI(loc.substr(n2+1,n1-n2)); varbox=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中的文件

获取
functiongetcookie(){
//获取传递过来的localStorage
console.log(window.localStorage.getItem('user'))
}

总结

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐