前端获取浏览器地址栏参数并处理

最新推荐文章于 2024-07-04 10:04:23 发布

雨季mo浅忆

最新推荐文章于 2024-07-04 10:04:23 发布

阅读量2.3k

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_58099903/article/details/126022358

版权

前端专栏收录该内容

159 篇文章 29 订阅

订阅专栏

本文介绍了如何在JavaScript中获取并解析浏览器URL的hash和search部分，用于获取如userId等信息。通过示例代码展示了如何从hash和search中提取数据，并将其存储到sessionStorage中。同时提供了一个名为`getSearchParams`的方法，用于解析URL查询参数，方便在项目中获取和使用这些参数。

摘要由CSDN通过智能技术生成

window.location.hash

window.location.search

window.location.hash

<script>
    // 获取浏览器 hash 路径上的 userId 信息
    (function getHashUserId() {
      let obj = {};
      // if (window.location.hash && window.location.hash.indexOf("?") !== -1) {

      // }
      if (true) {
        // let arr = window.location.hash.split('?')[1].split('&')
        let arr = ["userId=WKVbrfL4oiqgKyZzW/oIE+qe3d2QOSGE="];
        for (let i = 0; i < arr.length; i++) {
          let data = arr[i].split("=");
          console.log(data, "data"); // (3) ['userId', 'WKVbrfL4oiqgKyZzW/oIE+qe3d2QOSGE', ''] 'data'
          if (data.length === 3) {
            obj[data[0]] = data[1];
          }
        }
        console.log(obj.userId, "obj.userId"); // WKVbrfL4oiqgKyZzW/oIE+qe3d2QOSGE obj.userId
      }
      if (obj.userId) {
        sessionStorage.setItem("userId", obj.userId);
      }
    })();
  </script>

window.location.search

一、很多时候在路由跳转时或者在打开一个运维配置的服务时，

地址上传入我们需要的参数，下面我就依照项目中的案例讲一下

获取浏览器地址栏中参数的简单方法：

1、例如我们当前的地址是这样的

我们在控制台打印一下 location

接下来我们封装一个方法：

// 获取参数的方法
getSearchParams(search) {
    const searchParams = {}
// 如果 location 中有 search 值 ，去除 search 值中的第一个字符 ‘?’
    const searchStr = search.substring(1)
// 以 & 符为分隔符，解析出 key value 组合 ，组合的形式为 'key=value'
    const searchArr = searchStr.length ? searchStr.split('&') : []

    searchArr.forEach(item => {
// 以 = 为分隔符，解析出 key 和 value , 其中数组的第一项为 key ，数组的第二项为 value
      let keyAndValue = item.split('=')
// 如果查询参数中包含中文，会被编码成一串字符串，需要使用 decodeURIComponent 进行 解码
      let key = decodeURIComponent(keyAndValue[0])
      let value = decodeURIComponent(keyAndValue[1])
      if (key) {
        searchParams[key] = value
      }
    })
    return searchParams
  }
 
 const splitUrl = window.location.search;
 let searchData = this.getSearchParams(splitUrl)
 console.log(searchData， “searchData”)

会看到我们打印的值是：

这样我们就可以从 searchData 中解析我们需要的数据啦～