单页面记录用户每一次的搜索记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history</title>
</head>
<body>
<input type="text"><button type="button" onclick="search(ipt.value)">搜索</button>
<div class="main"></div>
<script>
// 单页面记录用户每一次的搜索记录
const data = [
{
name: "HTML"
},
{
name: "CSS"
},
{
name: "JS"
},
{
name: "Vue"
},
{
name: "React"
},
{
name: "TS"
}
]
const ipt = document.querySelector("input");
console.log('ipt: ', ipt);
const button = document.querySelector("button");
console.log('button: ', button);
const divContainer = document.querySelector(".main");
console.log('divContainer: ', divContainer);
// mode为cache那就表示用户点击了回退普通搜索（不记录状态），如果正常搜索那就记录该状态（记录状态好随时切换记录）
const search = (iptVal, mode) => {
const result = iptVal !== "" ? data.filter(item => iptVal === item.name) : data;
mode !== 'cache' && history.pushState({ iptVal: iptVal }, null, `#${iptVal}`); // 每次搜索进行记录
render(result, mode, iptVal)
}
const render = (data, mode, iptVal) => {
mode === 'cache' && (ipt.value = iptVal)
const vNode = data.map(item => `<div>${item.name}</div>`).join("");
divContainer.innerHTML = vNode;
}
render(data)
// 监听用户是否点击回退，如果回退则回到上一个历史记录（e.state.xxx 拿到上一个历史记录）（只要url变了就会触发）
window.addEventListener('popstate', (e) => {
search(e.state?.iptVal || "", "cache")
})
// hash值变了才会触发
window.addEventListener('hashchange', (e) => {
console.log(e)
})
</script>
</body>
</html>