javascript(js) 網頁(Html)之間 傳值
javascript(js) 網頁(Html)之間 傳值
資料來源: ChatGPT3.5
https://juejin.cn/post/6956215013858082852
01.URL (get 傳值)方案
// 發送端網頁 var dataToSend = "Hello"; window.location.href = "receiver.html?data=" + encodeURIComponent(dataToSend);
// 接收端網頁
var receivedData = decodeURIComponent(window.location.search.replace("?data=", ""));
console.log(receivedData); // 輸出: Hello
<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>
//===================//
<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>
02.Cookies 方案
// 發送端網頁
document.cookie = "data=Hello";
// 接收端網頁
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.startsWith("data=")) {
var receivedData = cookie.substring("data=".length, cookie.length);
console.log(receivedData); // 輸出: Hello
}
}
<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>
//=================//
<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>
03.LocalStorage 或 SessionStorage 方案
// 發送端網頁
localStorage.setItem("data", "Hello");
// 接收端網頁
var receivedData = localStorage.getItem("data");
console.log(receivedData); // 輸出: Hello
<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>
//=======================//
<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>
04.PostMessage API[如果你的網頁是嵌套在另一個窗口或 iframe 中，你可以使用 PostMessage API 進行跨窗口通信] 方案
// 發送端網頁
var dataToSend = "Hello";
window.parent.postMessage(dataToSend, "https://receiverdomain.com");
// 接收端網頁
window.addEventListener("message", function(event) {
if (event.origin === "https://senderdomain.com") {
var receivedData = event.data;
console.log(receivedData); // 輸出: Hello
}
});