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

对于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:希望对路过的小伙伴有所帮助，多多提出宝贵意见~

---

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