js-如何在两个页面之间互相传递数据？

最新推荐文章于 2024-11-02 09:22:29 发布

原创最新推荐文章于 2024-11-02 09:22:29 发布 · 9.5k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

路漫漫其修远兮，吾将上下而求索～

收录于

web前端

当前文章被收录于：

web前端

7 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了两种常用的页面间数据传递方式：通过URL参数传递及利用cookie或localStorage存储数据。提供了具体的JavaScript函数实现，并展示了如何在实际场景中使用这些技术。

页面之间传递数据我们常用到的两种方式：

把要传递的数据作为字符串拼接到要跳转的url后面，另一个页面直接读取本页面的url

这是封装好的两个函数，直接拿来调用就可以

//把参数拼接到url后面
function grow(obj,url) {
    var s = '';
    for(var k in obj){
        s += "&"+k+"="+obj[k];
    }
    var Str = s.substr(1);

    if(url.indexOf("?") > -1){
        url = url+"&"+Str;
    }else{
        url = url+"?"+Str;
    }
    return url;
}


//从url读取数据
function GetQueryString(name,url)
{
    url = url || window.location.search.substr(1);
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = url.match(reg);
    if(r!=null)return decodeURI(r[2]);
    return null;
}


    //点击跳转到b页面
    $("跳转按钮").on("click",function () {

        var name = $("name").val();
        var id = $("id").val();

        var currentCity = {
            cityid:id,
            cityName:name
         };

        var url = "b.html";
        window.open( grow(currentCity,url),"_self"); 

    });

    //b页面读取数据
    var cityId = GetQueryString("cityid","");
    var cityName = GetQueryString("cityName","");