Проблема с history.pushState при использовании AJAX

Question

Я совершенно новичок в JavaScript и истории API в частности.

Я делаю запрос AJAX GET для загрузки следующей или предыдущей страницы на веб-сайте.

function ajax_get_update(url)
    {
    $.ajax({
        async: true,
        type: "GET",
        url: url,
        cache: true,
        success: function(result){
              sessionStorage.setItem("result", result);
              update_content(result);
            }
    });
    history.pushState(url, url, url)
}

AJAXчасть и изменение содержимого страницы работает отлично.Как вы можете видеть, я использую history.pushState(url, url, url), чтобы добавить следующую страницу в историю, чтобы я мог использовать кнопку назад, чтобы вернуться на эту страницу.

url выглядит примерно так http://127.0.0.1:8000/?page=2

Проблема в том, что если я перейду на page3 с page2, а затем снова на page3 и т. Д., История будет содержать все эти переходы, и когда я нажимаю кнопку "Назад", я продолжаю изменять назад ивперед от page2 до page3 несколько раз, прежде чем я в конечном итоге доберусь до page1.Я хочу page3 -> page2 -> page1 и т. Д.

Как бы вы решили эту проблему?

Answer 1

Это не проверено, но должно соответствовать вашим потребностям.Идея состоит в том, чтобы обновлять window.history только для вновь добавленных URL.

При каждом успешном запросе мы проверяем, присутствует ли текущий URL в myState.Если нет, мы можем открыть новую страницу и обновить историю и поместить URL-адрес в наш личный кеш myState.

. Это позволит вам сохранить ваши URL-адреса в порядке и предотвратить дублирование записей истории.

Пожалуйста,знать, что этот код использует ES2015.Вы можете искать в интернете полифиллы:)

// it is probably not a good idea to keep your own history
let myState = [];

function ajax_get_update(url) {
  $.ajax({
    async: true,
    type: "GET",
    url: url,
    cache: true,
    success: function(result) {
      sessionStorage.setItem("result", result);
      update_content(result);
      update_history(url);
    }
  });
}

function update_history(url) {
  // window.history is only updated when the current url is not
  // saved in our private history
  if (!myState.includes(url)) {
    history.pushState(url, url, url);
    myState.push(url);
  }
}