<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无刷新更改地址栏</title>
</head>
<body>
<button onclick="change()">更改地址栏</button>
<select id="sel">
<option value="3">橙</option>
<option value="2">绿</option>
<option value="1">黄</option>
</select>
<script>
console.log(66666666, location);
console.log(location.search.split('=')[1]);
sel.value = location.search.split('=')[1];
function change() {
// 刷新地址栏
// location.href = './history.html?a=1&b=2';
// 无刷新更改地址栏 新增一条历史记录
// history.pushState(null,null,'?a=1&b=2');
// 无刷新更改地址栏 不会添加历史记录
history.replaceState(null, null, '?a=1&b=2');
}
sel.onchange = function () {
console.log(sel.value);
history.replaceState(null, null, `?color=${sel.value}`);
// 筛选列表功能，页面不刷新更改地址栏里面的搜索条件， 目的：当用户刷新页面之后，页面里面的筛选条件和刷新之前条件是一样的
}
</script>
</body>
</html>