JS 前端页面之间互传数据

一、URL 传参

优点：取值方便.可以跨域。
缺点：值长度有限制。

Location 对象

Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。

search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

RegExp 对象

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

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>

参考

  1. JS 页面间传值 ↩︎

  2. Location 对象 ↩︎

  3. JavaScript RegExp 参考手册 ↩︎

  4. Window 对象 ↩︎

posted @   懦尘  阅读(1622)  评论(0)  编辑  收藏  举报
相关博文：
·  ApplicationContextAware 接口
·  博客园美化之 Cnblogs-Theme-SimpleMemory
·  前端页面之间传值的两种方式
·  webUI基础 HTML+CSS+JavaScript
·  在多个页面之间需要传递参数，你是如何传递这些参数的？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示
SQL AI 助手