JS 前端页面之间互传数据
作者：互联网
一、URL 传参[1]
优点：取值方便.可以跨域。
缺点：值长度有限制。
Location 对象[2]
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。
search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
RegExp 对象[3]
RegExp 对象表示正则表达式。
match 是支持正则表达式的 String 对象的方法，作用是找到一个或多个正则表达式的匹配。
示例
parent
<body>
<input type="button" value="打开新窗口" onclick="open_param1()">
<input type="button" value="显示返回值" onclick="open_param2()">
<script>
function open_param1(){
var id = 1;
window.open("child.html?id=" + id);
}
function open_param2(){
var afterUrl = window.location.search.substring(1);
alert(afterUrl);
}
</script>
</body>
child
<body>
<input type="button" value="点击显示参数" onclick="param()">
<form id="test1" action="parent.html">
<input name="name" type="text" value="zhangsan" />
<input name="age" type="text" value="18" />
<input type="submit" value="提交"/>
</form>
<script>
function param(){
var url = location.search;
var Request = new Object();
if(url.indexOf("?") != -1){
var str = url.substr(1) //去掉?号
strs= str.split("&");
for(var i = 0; i < strs.length; i++){
Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
//alert(Request[参数名]);
console.log(Request);
// 例一
console.log("例一")
console.log(Requests("a"));
console.log(Requests("b"));
console.log(Requests("c"));
//例二
console.log("例二")
var str ="www.abc.com/index.htm?a=1a&b=2b&c=3c";
console.log(str.getQuery("a"));
console.log(str.getQuery("b"));
console.log(str.getQuery("c"));
}
// 例一
function Requests(strName){
var strHref ="www.abc.com/index.htm?a=1a&b=2b&c=3c";
var intPos = strHref.indexOf("?");
var strRight = strHref.substr(intPos + 1);
var arrTmp = strRight.split("&");
for(var i = 0; i < arrTmp.length; i++){
var arrTemp = arrTmp[i].split("=");
if(arrTemp[0].toUpperCase() == strName.toUpperCase())
return arrTemp[1];
}
return "";
}
// 例二
String.prototype.getQuery = function(name){
var reg = new RegExp("(^|&)"+ name+"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("?")+1).match(reg);
if(r!=null)
return unescape(r[2]);
return null;
}
</script>
</body>
二、Cookie
优点：可以在同源内的任意网页内访问。生命期可以设置。
缺点：值长度有限制。
示例
注意：本地直接打开 Cookie 设置可能不成功，起一个服务器试试。
parent
<body>
<input type="text" id="txt1" name="txt1">
<input type="button" value="Post" onclick="param()">
<script>
function param() {
var str = document.getElementById("txt1").value;
setCookie("str", str);
}
function setCookie(name,value){
var Days = 30; // 此 cookie 将被保存 30 天
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name +"="+ escape(value) + ";expires=" + exp.toGMTString();
location.href = "child.html";
}
</script>
</body>
child
<body>
<script>
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^|)"+name+"=([^;]*)(;|$)"));
if(arr != null)
return unescape(arr[2]);
return null;
}
console.log(getCookie("str"));
</script>
三、Window[4]
xxxStorage 属性
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage 属性是只读的。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
// 存
localStorage.setItem("attributeName", "localStorage");
sessionStorage.setItem("attributeName", "sessionStorage");
// 取
localStorage.getItem("attributeName");
sessionStorage.getItem("attributeName");
open() 方法
window.open(URL, name, specs, replace)
使用 window.open 打开的两个窗口之间存在着关系“父子”关系。
子窗口可以通过 window.opener 指向父窗口，访问父窗口的对象。
优点：取值方便。
只要 opener 指向父窗口，就可以访问所有对象。
不仅可以访问值，还可以访问父窗口的方法。值长度无限制。
缺点：两窗口要存在着关系。
就是需要使用 open 打开窗口，不能跨域。
示例
注意：本地直接打开设置可能不成功，起一个服务器试试。
parent
<body>
<input type="text" id="txtId"/>
<input type="text" id="txtName"/>
<input type="button" id="btnShow" onclick="showItem();" value="show child"/>
<script>
function showItem() {
var win = window.open("B.html",null," height=300,width=450, Left=300px,Top=20px, menubar=no,titlebar=no,scrollbar=no,toolbar=no, status=no,location=no");
}
</script>
</body>
child
<body>
<input type="button" id="btnSelect" onclick="check()" value="test"/>
<script>
function check(){
window.opener.document.getElementById("txtId").value="id";
window.opener.document.getElementById("txtName").value="name";
}
</script>
</body>
参考
标签：function,console,log,JS,window,互传,str,var,页面 来源： https://www.cnblogs.com/quietlydust/p/15922218.html