单页面记录用户每一次的搜索记录(history)

单页面记录用户每一次的搜索记录

<!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>