(超实用)前端地址栏保存&获取参数,地址栏传输中文不在乱码

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/autoXingJY/p/11596506.html

获取地址栏路径 : window.location

demo1 url拼接参数对象成新url

var linkObj = {
    "uid": 6666,
    "name": "lili",
    "sex": "male"
  }

  var endLink = createURL(url, linkObj);
  // 将一个对象拼接在url的后面:   createURL(url, linkObj)
  function createURL(url, param) {
    var urlLink = '';
    $.each(param, function (item, key) {
      var link = '&' + item + "=" + key;
      urlLink += link;
    })
    urlLink = url + "?" + urlLink.substr(1);
    return urlLink.replace(' ', '');
  }

  console.log("endLink", endLink);

demo2 url提取拼接的参数对象

 var jie = parseQueryString(urlStr);
  console.log("jie", jie);
  // {uid: "2222", name: "xiaoming", sex: "famale"}

  // 解析url 拿到所有参数对象 parseQueryString(urlStr);
  function parseQueryString(url) {
    var result = {};
    if (url.indexOf('?') > -1) {
      var str = url.split('?')[1];
      var temp = str.split('&');
      for (var i = 0; i < temp.length; i++) {
        var temp2 = temp[i].split('=');
        result[temp2[0]] = temp2[1];
      }
    }
    return result;
  }

demo3 从地址栏拿到指定参数

超方便的方法: 通过正则来从地址栏获取指定参数

 // GetQueryString("uid")
  function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
  }

demo4 地址栏传输中文不在乱码

运行first.html, 将跳转到second.html页面,页面title显示"中文参数".

///first.html页面

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
</body>
<script type="text/javascript">
  /**
   * 这是第一个页面first.html
   * 说明: 1 页面first.html运行,跳转到页面second.html
   * 2 页面first.html跳转到页面second.html过程, 通过地址栏传参的方式传过去了encode了的 "中文参数"
   * 3 页面second.html通过地址栏解码 "中文参数",并展示在页面title上
   * 
   */
  var cnWord = "中文参数";
  var encodeWord = encodeURI(encodeURI(cnWord)); // encode进行参数编码
  window.location.href = "second.html?cnWord=" + encodeWord;
</script>

///second.html页面

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
</body>
<script type="text/javascript">
  var encodeWord = getQueryString("cnWord"); //地址栏获取first.html页面传来的地址url,并decode解码
  var decodeWord = decodeURI(encodeWord); //decode转码
  document.getElementsByTagName("title")[0].innerHTML = decodeWord;



  //获取地址栏参数的方法
  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 null;
  }
</script>

</html>

如果觉得文章对你有用, 请帮忙点个推荐和收藏 ! Thanks♪(･ω･)ﾉ