美文网首页
浏览器无刷新,同步更新地址栏数据

浏览器无刷新,同步更新地址栏数据

作者: 码农私房菜 | 来源:发表于2024-05-20 08:52 被阅读0次

    同步更新地址栏数据

    /**
     * 获取地址栏参数信息
     */
    function getUrlQueryString(name: string, type = 'search', detype?: boolean) {
            let newName = name,
                reg = new RegExp('(^|&)' + newName + '=([^&]*)(&|$)', ''),
                paramHash = decodeURI(window.location.hash).substr(1) || '',
                paramSearch = decodeURI(window.location.search).substr(1) || '',
                param
            type === 'search' ? (param = paramSearch) : (param = paramHash)
            let result = param.match(reg)
            if (result !== null) {
                const res = result[2] || ''
                if (detype) return decodeURIComponent(res)
                else return unescape(res)
            }
            return null
        }
    
    /**
     * 同步更新地址栏数据
     * @param list: { key: string; value: string }[]
     */
    const updateLocalUrlAll = (list: { key: string; value: string }[]) => {
        
        let baseUrl: string = decodeURIComponent(window.location.href)
        list.forEach((i: Iitem) => {
            const { key = '', value = '' } = i || {}
            const hasKey = baseUrl.indexOf(key + '=') !== -1
            const targetKey = getUrlQueryString(key) || ''
    
            if (!hasKey) {
                baseUrl.indexOf('?') > -1
                    ? (baseUrl = `${baseUrl}&${key}=${value}`)
                    : (baseUrl = `${baseUrl}?${key}=${value}`)
            } else {
                baseUrl = baseUrl.replace(key + '=' + targetKey , key + '=' + value)
            }
        })
        // 更新 url
        window.history.replaceState(null, '', baseUrl)
    }
    

    相关文章

      网友评论

          本文标题:浏览器无刷新,同步更新地址栏数据

          本文链接:https://www.haomeiwen.com/subject/imgnfjtx.html