超实用的JS方法---url篇

这是一个系列，我会记录工作中封装的最常用最实用的方法。大家如果有什么建议想让我封装的方法评论区留言喔~好了，废话不多说直接上代码。

获取代码地址：gitee.com/wmbuding/li…

1、获取url参数

虽然react，vue之类的框架都有自己拿url上参数的办法，但总有情况是需要纯js获取url的 是。hash和传统url都合适

/**
 * 使用 https:www.baidu.com?test=1   getUrlParam('test')=>1
 * @param name 参数名
 * @param searchStr  在哪里获取参数，不传默认是当前url
 * @returns 
 */
export const getUrlParam = (name: string, searchStr?: any): string | null => {
  const { search, hash } = window.location
  const hashSearch = hash.split('?')[1]
  searchStr = searchStr || search.substr(1) || hash.split('?')[1] || ''
  if (hashSearch) searchStr += `${searchStr ? '&' : ''}${hashSearch}`
  if (searchStr.indexOf('?') !== -1) searchStr = searchStr.split('?')[1]
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  let r = searchStr.match(reg)
  if (r != null) return unescape(r[2])
  return null
}
    

2、获取url全部参数

实际开发里总有一些场景是需要获取url全部参数，传给后端拿数据的。

/**
 * 获取url全部参数
 * @param urlStr 在哪里获取参数，不传默认是当前url
 * @returns 
 */
export const getUrlAllParams = (urlStr?: string) => {
  const { hash } = window.location
  const paramsObj: { [key: string]: string } = {}
  if (!urlStr) {
    const isQuestion = hash.includes('?')
    if (isQuestion) urlStr = hash.split('?')[1]
    if (!isQuestion) return false
  }
  urlStr = decodeURI(urlStr || '')
  const urlStrArr = urlStr.split('&')
  urlStrArr.forEach(el => {
    const key = el.split('=')[0]
    const value = el.split(`${key}=`)[1]
    paramsObj[key] = value
  })
  return paramsObj
}

3、删除url参数

实际中往往需要删除url上的某些敏感信息，比如免登过来的参数，token之类，这时候就需要删除url的参数并且静默刷新页面

/**
 * @param name 要删除参数的值
 * @param url 在哪里删除，不传默认当前url
 * @returns 
 */
export const urlDel = (name: string, url?: string) => {
  url = url || window.location.href
  const urlArr = url.split('?')
  if (urlArr.length > 1 && urlArr[1].indexOf(name) > -1) {
    const query = urlArr[1]
    const obj: { [key: string]: string } = {}
    const arr: any[] = query.split('&')
    arr.forEach((el) => {
      const vals = el.split('=')
      const key = vals[0]
      const val = vals[1]
      obj[key] = val
    })
    delete obj[name]
    const key = Object.keys(obj)
    if (key.length === 0) return urlArr[0]
    const urlte =
      urlArr[0] +
      '?' +
      JSON.stringify(obj)
        .replace(/[\"\{\}]/g, '')
        .replace(/\:/g, '=')
        .replace(/\,/g, '&')
    return urlte
  } else {
    return url
  }
}

/**
 * 删除指定参数，并且无痕刷新页面
 * @param arr 要删除的参数数组
 * @param url 在哪里删除，不传默认当前url
 */
 export const urlReplaceParams = (arr: string[], url?: string) => {
  url = url || window.location.href
  for (let index = 0; index < arr.length; index++) {
    const el = arr[index]
    url = urlDel(el, url)
  }
  history.replaceState(null, 'null', url)
}

4、获取url参数，并且判断本地缓存是否一致，如果不一致就更新

interface GetValueFnOption {
  // 是否需要存缓存，触发条件如果url可以获取到值并且的不等于缓存的值，
  saveStorage?: boolean;
  // 缓存的类型，local || session
  storageType?: "local" | "session";
  // 存缓存的key，默认等于key
  saveKey?: string;
  // 默认值，当url和缓存拿不到值，默认复制这个
  defaultVal?: any;
}
interface GetValueFn {
  (key: string, option?: GetValueFnOption): string;
}


/**
 *  获取url参数，并且更新到缓存
 * @param key
 * @param option @GetValueFnOption
 * @returns string
 */
export const getValue: GetValueFn = (key: string, option = {}) => {
  const {
    saveStorage = true,
    storageType = "local",
    saveKey = key,
    defaultVal = "",
  } = option || {};
  const storageFns = {
    local: localStorage,
    session: sessionStorage,
  };
  const storage = storageFns[storageType];
  const urlVal = getUrlParam(key);
  const storeVal = storage.getItem(saveKey);
  const value = urlVal || storeVal || defaultVal;
  if (saveStorage && urlVal && urlVal !== storeVal) {
    storage.setItem(key, value);
  }
  return value;
};