23. URL 参数与 History：筛选状态可分享

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

关键词分类

三、知识点提醒

URL 参数适合保存搜索、筛选、分页等轻量状态。
`pushState` 不会刷新页面，但会改变浏览器地址。
监听 `popstate` 可以响应浏览器前进 / 后退。

四、练习建议

把第 16 页的筛选条件同步到 URL。
增加 page 参数。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/23-url-history.js，下面同步展示，方便学习和复制。

// 页面 23：URLSearchParams 与 History API
const urlKeyword = document.querySelector('#p23-keyword');
const urlCategory = document.querySelector('#p23-category');
const urlOutput = document.querySelector('#p23-output');

function readUrlState() {
  const params = new URLSearchParams(window.location.search);
  return {
    keyword: params.get('keyword') || '',
    category: params.get('category') || 'all'
  };
}

function writeUrlState(state) {
  const params = new URLSearchParams();
  if (state.keyword) params.set('keyword', state.keyword);
  if (state.category !== 'all') params.set('category', state.category);

  const nextUrl = `${window.location.pathname}?${params.toString()}`;
  history.pushState(state, '', nextUrl);
  renderUrlState(state);
}

function renderUrlState(state) {
  urlKeyword.value = state.keyword;
  urlCategory.value = state.category;
  urlOutput.textContent = `当前状态：\nkeyword=${state.keyword || '(空)'}\ncategory=${state.category}`;
}

document.querySelector('#p23-apply').addEventListener('click', () => {
  writeUrlState({ keyword: urlKeyword.value.trim(), category: urlCategory.value });
});

window.addEventListener('popstate', () => {
  renderUrlState(readUrlState());
});

renderUrlState(readUrlState());