JS跨页面传递参数值并获取该参数

骑猪看日落 2022-04-05 07:51 248阅读 0赞

对于js跨页面传递参数的方法有两种：

1、针对参数较为简单，字符串较短的参数传递可以**采用url后缀添加参数**的方法来实现；

2、但是对于参数较为复杂或者参数比较多的情况就可以采用**本地储存**的方式来实现；

**\*\*首先第一种：通过url传递参数值并获取该参数**

window.location.href="index.html?id=01&name='test'";

将参数直接拼接在url地址后面然后通过js方法在新页面加载时将参数获取出来

方法一、

//获取url传递的参数值
                function getQueryString(name) {
                    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) {
                        return unescape(r[2]);
                        //return decodeURI(r[2]); //解决中文乱码问题
                    }
                }
                //调用参数
                var Name=getQueryString("name");
                var ID=getQueryString("id");
                console.log(Name);
                console.log(ID);

**特别注意：**

**在使用的过程中，发现在获取的参数中存在中文时，获取到的值是乱码的**

**解决办法：**

将解码方式**unscape**换为**decodeURI**

**原因：**

**浏览器会将url中的中文参数进行encodeURI编码，所以要通过js使用decodeURI进行解码**

方法二、

//js方法
     function GetRequest() {
       var url = location.search; //获取url中"?"符后的字串
       var theRequest = new Object();
       if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          strs = str.split("&");
          for(var i = 0; i < strs.length; i ++) {
             theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
          }
       }
        return theRequest; 
    }
    
      //调用方法
        var Request = new Object();
        Request = GetRequest();
        var 参数1,参数2,参数3,参数N;
        参数1 = Request['参数1'];
        参数2 = Request['参数2'];
        ......

--------------------

\*\***第二种是本地存储较复杂的参数值然后从本地储存中获取该值**

本地存储： localStorage 、sessionStorage 方法

localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用

sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失

//使用方法：
    localStorage.setItem("key","value")//存储
    localStorage.getItem("key")//按key进行取值
    localStorage.valueOf()//获取全部值
    localStorage.removeItem("key")//删除单个值
    localStorage.clear()//删除全部数据
    localStorage.length//获得数据的数量
    localStorage.key(N)//获得第N个数据的key值
    
    //***  sessionStorage和localStorage用法相同
    
    //注意： localStorage只能存储字符串的数据，对于数组或对象却不能直接存储
    
    //解决方案：
    //通过JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到localStorage中就可以了
    
    //比如：
           //将list数组存入 localStorage
           localStorage.setItem("list", JSON.stringify(list));  
           var list = localStorage.getItem("list");   //获取list
           var obj =JSON.parse(list);    //将json字符串解析成数组对象 obj
           console.log(obj);

ps:希望对路过的小伙伴有所帮助，多多提出宝贵意见~

--------------------

如果看完对你有所帮助，请打赏博主喝个娃哈哈哈哈哈吧~~

![20190621103224859.jpg][]

[20190621103224859.jpg]: /images/20220405/7803109a3b5e4f21ae6cf788871839c7.png