反应历史推送搜索参数 - Javascript

在现代的网络应用程序中，经常使用反应历史推送搜索参数的方式来更新页面，这允许用户分享链接并保留页面的状态。在本文中，我们将介绍如何在Javascript中使用反应历史推送搜索参数。

获取和更新参数

获取参数

可以使用location.search来获取当前URL中的搜索部分（即问号后面的部分）。例如，对于URL http://example.com/?page=2&color=blue，搜索部分为?page=2&color=blue。可以使用以下代码来获取该搜索部分并将其转换为一个对象：

const params = {};

location.search.substr(1).split('&').forEach(param => {
  const [key, value] = param.split('=');
  params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
});

console.log(params.page); // Output: 2
console.log(params.color); // Output: blue

更新参数

要更新URL的搜索参数，我们需要使用history.pushState()方法。例如，我们想要将URL http://example.com/?page=2更新为URL http://example.com/?page=3：

const newParams = { ...params, page: 3 }; // 创建一个新的搜索参数对象并将页面更新为3
const newSearch = '?' + Object.entries(newParams).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&'); // 将新的搜索参数对象转换为搜索字符串
const newUrl = location.pathname + newSearch + location.hash; // 构建新的URL
history.pushState(null, '', newUrl); // 更新URL

现在，URL将更新为http://example.com/?page=3。

监听URL变化

如果用户通过浏览器的前进/后退按钮等方式导航到另一个页面时，URL的搜索部分可能会发生更改。要在URL发生变化时更新页面状态，可以监听popstate事件：

window.addEventListener('popstate', () => {
  const newParams = {};
  location.search.substr(1).split('&').forEach(param => {
    const [key, value] = param.split('=');
    newParams[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
  });

  console.log(newParams.page); // Output: 3
});

现在，当用户通过浏览器导航到URLhttp://example.com/?page=3时，页面将打印出3。

结论

反应历史推送搜索参数是一种很有用的技术，可以帮助我们在现代网络应用程序中跟踪页面状态。使用Javascript，我们可以轻松地获取和更新URL的搜索部分，以及通过监听popstate事件来更新页面状态。