js实现页面与页面之间传值的三种方法

最新推荐文章于 2024-08-22 10:47:09 发布

橙-极纪元JJY.Cheng

最新推荐文章于 2024-08-22 10:47:09 发布

阅读量4w

点赞数 24

分类专栏： JS 前端HTML

本文链接：https://blog.csdn.net/cplvfx/article/details/75009590

版权

JS 同时被 2 个专栏收录

163 篇文章 4 订阅

订阅专栏

前端HTML

81 篇文章 1 订阅

订阅专栏

利用地址栏URL传值

A页面传值

<input type="text" id="txt">

</br>

<input type="button" value="TEST" onclick="test()"/>


<SCRIPT LANGUAGE="JavaScript">
function
 test(){       
var s =document.getElementById("txt");
location.href="2.html?"+"txt="+encodeURI(s.value);
 }

</SCRIPT>

B页面接受并打印

  <script language="javascript" type="text/javascript">
var loc=location.href;
var n1=loc.length;//地址的总长度
var n2=loc.indexOf("=");//取得=号的位置
var id=decodeURI(loc.substr(n2+1, n1-n2));//从=号后面的内容
alert(id);//
document.write(id)

  </script>

注意：这个URL例子比较简单，如需看更深入的例子请点击链接转移！

名称：JS获取URL中参数，支持多参数传值，支持中文

url：http://blog.csdn.net/cplvfx/article/details/78653304

利用H5 Web 存储传值

A页面传值

<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;  
}  
    
</script>

B页面接受并打印

<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>

利用JavaScript Cookie存储传值

(

cookie储存是需要服务器支持的，

本地直接运行静态文件是实现不了的，

需要给静态文件搭建服务器支持；

例如：打开后的地址栏为

http://192.168.1.5:809/2.html

)

A页面传值

<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 值的函数,创建一个函数用于存储访问者的名字
//cname:名称，必须字母
//cvalue：值
//exdays：过期时间（天）
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 的值
//cname:名称，你之前设置的名称
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>

B页面接受并打印

<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 的值
//cname:名称，你之前设置的名称
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>