JavaScript无刷新修改浏览器地址栏URL

问题背景

在Web开发中，特别是支付系统等敏感场景，我们经常需要处理URL中的参数问题。当用户完成支付被重定向回成功页面时，URL中可能会携带一些敏感参数（如支付token、用户ID等），这既存在安全隐患，也影响用户体验。

解决方案

使用HTML5的History API可以优雅地解决这个问题，具体是通过pushState()方法实现无刷新修改URL：

/**
 * 清除当前URL中的所有查询参数，保留基础路径
 * @param {string} url - 需要保留的基础URL（包含域名，不带参数）
 */
function cleanUrlParams(url) {
    // 确保URL有效
    if (!url || typeof url !== 'string') {
        console.error('无效的URL参数');
        return;
    }
    
    // 分割URL，只取问号前的部分
    const cleanUrl = url.split('?')[0];
    
    // 使用History API修改URL（无刷新）
    window.history.pushState(
        {},                  // 状态对象
        document.title,      // 标题（保持原标题）
        cleanUrl            // 新的URL
    );
}

// 使用示例
const currentUrl = window.location.href; // 获取当前完整URL
cleanUrlParams(currentUrl);