html页面传值的几种方法

最新推荐文章于 2023-03-29 11:31:21 发布

ZD717822023

最新推荐文章于 2023-03-29 11:31:21 发布

阅读量3.3k

点赞数

分类专栏：前端基础知识文章标签： js

原文链接：http://blog.csdn.net/csdn_ds/article/details/78393564 https://blog.csdn.net/cplvfx/article/details/75009590

版权

前端基础知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 利用URL地址栏进行传值

<a href="/pc/buyCenter/leftMenu/myCancelOrder?searchContent=<%=totalOrders.unionOrderNumber%>"><%=order.statusMap[-100]%></a>

接收页面打印

 //获取链接中传过来的searchContent
 var searchContent=publicFun.GetQueryString("searchContent");

获取链接方法

//获取地址栏参数
exports.GetQueryString=function(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
 };

注意：JS获取URL中参数，支持多参数传值，支持中文

2.利用H5 Web 存储传值


<h1>利用HTML5 Web 存储 localStorage</h1>
<div onclick="save(1)">添加1</div>
<div onclick="save(2)">添加2</div>
<div onclick="save(3)">添加3</div>
<div onclick="save(4)">添加4</div>
<div onclick="save(5)">添加5</div>
<div onclick="find()">查找</div>
 
<div id="find_result"></div>
 
<script>
if(typeof(Storage)=="undefined")
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
//保存数据  
function save(cp_value){  
	var num = new Object;
    num.cp_keynum ="key_num";  
    num.cp_num_value = cp_value;
    var str = JSON.stringify(num); // 将对象转换为字符串
    localStorage.setItem(num.cp_keynum,str);
    alert("添加成功");
}
 //查找数据  
function find(){  
    var cp_keynum = "key_num";  
    var str = localStorage.getItem(cp_keynum);  
    var find_result = document.getElementById("find_result");
    var num = JSON.parse(str);  
    find_result.innerHTML = cp_keynum + "==" + num.cp_num_value;  
}

接收页面打印

<h1>利用HTML5 Web 存储 localStorage</h1>
<div onclick="find()">查找</div>
<div id="find_result"></div>
<script>
if(typeof(Storage)=="undefined")
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
 
 //查找数据  
function find(){  
    var cp_keynum = "key_num";  
    var str = localStorage.getItem(cp_keynum);  
    var find_result = document.getElementById("find_result");
    var num = JSON.parse(str);  
    find_result.innerHTML = cp_keynum + "==" + num.cp_num_value;  
}  

</script>

3.利用JavaScript Cookie存储传值

<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<title>无标题文档</title>
<style>
	div{ height: 36px; line-height: 36px; border: #eee solid 1px; margin: 10px;}
</style>
<script>
	
	
//添加 cookie
function cp_add_cookie(num){
setCookie("cp_keynum",num,2);
}
//查找
function cp_seek_cookie(){
var cp_keynum=getCookie("cp_keynum");
var find_result = document.getElementById("find_result2");
find_result.innerHTML = "cp_keynum == " + cp_keynum;  
}
 
 
//设置 cookie 值的函数,创建一个函数用于存储访问者的名字
function setCookie(cname,cvalue,exdays){
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();
	document.cookie = cname+"="+cvalue+"; "+expires;
}
//获取 cookie 值的函数,创建一个函数用户返回指定 cookie 的值
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) {
		var c = ca[i].trim();
		if (c.indexOf(name)==0) return c.substring(name.length,c.length);
	}
	return "";
}
 
</script>
</head>
<body>
<h1>利用JavaScript Cookie存储 </h1>
<div onclick="cp_add_cookie(1)">添加1</div>
<div onclick="cp_add_cookie(2)">添加2</div>
<div onclick="cp_add_cookie(3)">添加3</div>
<div onclick="cp_seek_cookie()">查找</div>
<div id="find_result2"></div>
 
</body>

接收页面打印

<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<title>接受数据</title>
<style>
	div{ height: 36px; line-height: 36px; border: #eee solid 1px; margin: 10px;}
</style>
<script>
	
	
//查找 cookie
 
function cp_seek_cookie(){
var cp_keynum=getCookie("cp_keynum");
var find_result = document.getElementById("find_result2");
find_result.innerHTML = "cp_keynum == " + cp_keynum;  
}
 
//获取 cookie 值的函数,创建一个函数用户返回指定 cookie 的值
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) {
		var c = ca[i].trim();
		if (c.indexOf(name)==0) return c.substring(name.length,c.length);
	}
	return "";
}
 
</script>
 
</head>
<body>
<h1>利用JavaScript Cookie存储 </h1>
<div onclick="cp_seek_cookie()">查找JavaScript Cookie存储的值</div>
<div id="find_result2"></div>
</body>

4.window.open和window.opener之间传值

window.open可以打开一个新的页面，在新的页面中可以通过window.opener获取父页面的窗口对象，从而可以获取父窗口中的参数。

<button id="open">打开新的页面</button> 
<script> 
　　$('#open').click(function () { 
　　　　window.open('./b.html') 
　　}) 
</script>

打印页面

<script>
 　var content = window.opener.document.getElementById("open").innerHTML;  
　　alert(content);  
</script>

总结：

对于不同的解决方法，都有优缺点

url携带参数
优点：取值方便，可以跨域，利于页面分享，没有环境限制。
缺点：url携带参数值的长度有限制.
cookie方式
优点：可以在同源内的的任意网页中访问，存储数据的周期可以自由设置。
缺点：有长度限制。
设置窗口之间的父子关联关系
优点：取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可访问值,还可以访问父窗口的方法.值长度无限制。
缺点:两窗口要存在着关系.就是利用window.open打开的窗口。不能跨域。
h5技术，window.localStorage存储数据
优点：储存空间大，有5M存储空间。
缺点：不是所有浏览器都支持。

资源参考：http://blog.csdn.net/csdn_ds/article/details/78393564
https://blog.csdn.net/cplvfx/article/details/75009590

ZD717822023

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html页面传值的几种方法

1. 利用URL地址栏进行传值&lt;a href="/pc/buyCenter/leftMenu/myCancelOrder?searchContent=&lt;%=totalOrders.unionOrderNumber%&gt;"&gt;&lt;%=order.statusMap[-100]%&gt;&lt;/a&gt;接收页面打印 //获取链接中传过来的searchCo...
复制链接

扫一扫