使用场景
在获取接口数据后,拿到获取到得值,赋值给地址栏,并使页面不刷新
方法一:使用本地存储
如果所需要得数据是其他页面获取到得,可以存在本地,拿到之后将其移除掉
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);
}