地址栏url参数处理

前言

前端开发存在需要获取 url 上的参数，对页面做一个初始化的操作，这个时候我们就需要去获取 url 上的参数。
在以前，通常会写一个 getUrlParams 函数，来获取 url 上的参数。

function getUrlParams(url: string) {
  let urlstr = url.split("?")[1];
  let params = urlstr.split("&");
  let paramsObj = {};
  params.forEach((item) => {
    let [key, value] = item.split("=");
    paramsObj[key] = value;
  });
  return paramsObj;
}

但是更现代一点的写法是使用 URLSearchParams 来获取 url 上的参数，目前，几乎所有浏览器都支持这个方法。

function getUrlParams(url: string) {
  let urlstr = url.split("?")[1];
  let params = new URLSearchParams(urlstr);
  return Object.fromEntries(params.entries());
}

在项目中，我一般会在获取地址栏参数时把一些需要数据持久化的参数存在 localstorage 中，把一些临时参数存在 sessionStorage 中。最后跳转页面时，把 url 上的参数去掉。
这样用户体验上会更加无感，也不需要看到地址上一堆后缀。

function getUrlParams(url: string) {
  const localParams = ["token", "mode", "keyTime", "order"];
  const sessionParams = ["temp"];
  const urlParams = new URLSearchParams(window.location.search);
  const params = Object.fromEntries(urlParams.entries());
  Object.keys(params).forEach((key) => {
    if (localParams.includes(key)) {
      localStorage.setItem(key, params[key]);
    } else if (sessionParams.includes(key)) {
      sessionStorage.setItem(key, params[key]);
    }
  });
  window.history.replaceState({}, "", window.location.pathname);
}

这一步放在页面的入口处，在加载动画(如果有的话)开始后运行，或者直接运行都可以，后续需要获取参数可以到对应的localstorage或者sessionStorage中获取。

前言​

前言