我建议使用 url 将过滤器存储为参数。

我在下面写了一个例子。让我们http://skylerfenn.com/news?order=asc&category=feature&year=2017用作以下函数的 url。

第1步：呼叫getParameters()在window.onpopstate和参数存储在状态。使用上面的 URL，getParameters()将参数作为对象返回{ order: 'asc', category: 'feature', year: '2017' }。

function getParameters() {
  let parameters = window.location.search.replace('?', '');

  let currentParameters = {};

  if (Object.keys(parameters).length) {

    parameters = parameters.split('&');

    for (let i = 0; i < parameters.length; i++) {
      let parameter = parameters[i].split('=');
      currentParameters[parameter[0]] = parameter[1];
    }

  }

  return currentParameters;
}

第 2 步：将任何新参数getNewParameters作为对象传递给下面的函数。例如，调用getNewParameters({ order: 'desc', year: null })返回对象{ order: 'desc', category: 'feature' }。请注意，它删除了年份，因为它为空。

function getNewParameters(newParameters) {
  const parameters = getParameters();

  const keys = Object.keys(newParameters);

  for (let i = 0; i < keys.length; i++) {
    const value = newParameters[keys[i]];

    parameters[keys[i]] = value;

    if (!value) {
      delete parameters[keys[i]];
    }
  }

  return parameters;
}

第 3 步：使用结果getNewParameters更新状态。还将结果传递给下面的函数以更新您的网址。

updateUrl(parameters) {
  let search = '';
  let j = 0;
  let separator = '?';

  Object.keys(parameters).forEach((key) => {

    let value = parameters[key];

    if (value) {

      if (j !== 0) {
        separator = '&';
      }

      search += `${separator}${key}=${value}`;

      j++;
    }
  });

  let newUrl = `${location.origin}${location.pathname}${search}`;

  // prevents pushing same url if function won't change url.
  if (location.href !== newUrl) {
    history.pushState(null, null, newUrl);
  }
}