动态修改地址栏传参数

使用场景

在获取接口数据后，拿到获取到得值，赋值给地址栏，并使页面不刷新

方法一：使用本地存储

如果所需要得数据是其他页面获取到得，可以存在本地，拿到之后将其移除掉
const id= JSON.parse(localStorage.getItem('id'))
if (id) {
   localStorage.removeItem('id')
   const url = new URL(location.href);
   url.searchParams.set('id', id)
   history.replaceState(null, null, url.toString())
 }

方法二：使用 History API

const id= JSON.parse(localStorage.getItem('id'))
if (id) {
    // 获取当前 URL 的参数
	let searchParams = new URLSearchParams(window.location.search);
	// 修改参数值
	searchParams.set('id', id);
	// 创建一个新的 URL，替换当前的 URL 但不刷新页面
	window.history.replaceState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
}

方法三：使用 URLSearchParams 对象

const id= JSON.parse(localStorage.getItem('id'))
if (id) {
	// 获取当前 URL 的参数
	let searchParams = new URLSearchParams(window.location.search);
	// 修改参数值
	searchParams.set('id', id);
	// 创建一个新的 URL，但不替换当前的 URL，也不刷新页面
	let newUrl = `${window.location.origin}${window.location.pathname}?${searchParams.toString()}`;
	// 使用 pushState 替换当前的 URL，但不刷新页面
	window.history.pushState({}, '', newUrl);
}