网页无感刷新，在浏览器中添加查询字符串但不刷新页面

解决

有两种主要方法可以实现这个功能：

1. 使用 History API 的 pushState 方法（推荐）

2. 使用 window.location.hash（传统方法）

建议使用现代的 History API 方法，因为它更加灵活且专业

function updateQueryString(key, value) {
    // 创建一个 URLSearchParams 对象来处理查询参数
    const searchParams = new URLSearchParams(window.location.search);
    
    // 设置或更新查询参数
    searchParams.set(key, value);
    
    // 构建新的URL
    const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
    
    // 使用 History API 更新URL，不会刷新页面
    window.history.pushState({ path: newUrl }, '', newUrl);
}

// 使用示例
document.getElementById('someButton').addEventListener('click', () => {
    updateQueryString('param1', 'value1');
});

// 监听浏览器的前进/后退按钮
window.addEventListener('popstate', (event) => {
    // 处理URL变化后的逻辑
    console.log('URL已更改:', window.location.search);
});

代码说明：

1. updateQueryString函数接受两个参数：key（查询参数名）和 value（参数值）

2. 使用URLSearchParams来处理查询字符串，这是一个现代的API，使参数处理更加方便

3. window.history.pushState方法用于更新URL而不刷新页面

4. 添加了popstate事件监听器来处理用户使用浏览器的前进/后退按钮时的情况

点击按钮后，URL将更新为类似：http://yourwebsite.com/?param1=value1，但页面不会刷新。