PushState: для чего предназначен объект состояния?

Ответ 1

Возьмите этот маленький пример: запустите скрипту (просмотр редактора):

У вас есть страница, где пользователь может выбрать цвет. Каждый раз, когда они это делают, мы генерируем новую запись истории:

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

Мы оставляем объект состояния пустым на данный момент и устанавливаем URL-адрес имени цвета (не перезагружаем страницу - этот URL-адрес не существует, поэтому вы получите 404).

Теперь нажмите один раз на красный, зеленый и синий. Обратите внимание, что URL-адрес изменяется. Теперь, что произойдет, если вы нажмете кнопку "Назад"?

Браузер действительно возвращается в историю, но наша страница не замечает этого - URL-адрес меняется с "/blue" на "/green", но наша страница остается на "Вы выбрали синий". Наша страница не синхронизирована с URL-адресом.

Это событие window.onpopstate и объект состояния для:

• мы включаем наш выбранный цвет в нашем объекте состояния

  function doPushState(color) {
      var state = { selectedColor: color },
          title = "Page title",
          path  = "/" + color;
  
      history.pushState(state, title, path);
  };
  

• Затем мы слушаем событие popstate, поэтому знаем, когда нам нужно обновить выбранный цвет, который (в jQuery) таков:

  $(window).on('popstate', function(event) {
      var state = event.originalEvent.state;
  
      if (state) {
          selectColor( state.selectedColor );
      }
  });
  

Попробуйте обновленный пример: запустить скрипту (просмотр редактора): наша страница теперь обновляется соответственно, когда пользователь перемещается по истории.

Ответ 2

Является конкретным и перспективным вариантом использования содержимого пользовательского представления и состояния данных в прогрессивном приложении с использованием настраиваемых элементов и шаблонов, которые разделены в представлении на региональном уровне

Представьте себе сетку с 64 ячейками в качестве вашего вида, на большом экране ящики составляют 147 ^ 2 штуки

URL-адрес представляет 64/пользовательские данные, связанные с идентификатором пользователя,

Затем веб-приложение может заполнить свою сетку конкретными данными состояния

В этом случае, я полностью верю в будущее, пользователь не захочет делиться своим личным состоянием и деталями, заполненными данными.

Используя предыдущие состояния истории и связанные с ними 650 тыс. данных

Полное, сложное приложение может быть собрано из истории и местоположения браузера, включая состояние, используя несколько известных подходов к сортировке.

Это круто

Ответ 3

Самый очевидный пример, который я могу видеть для pushState, replaceState и window.onpopstate - это Ajax-навигация для сайта.

Скажите, что ваш сайт или веб-приложение исправлено nav и footer. Таким образом вы можете загружать содержимое новых страниц в конкретный контейнер, например, новый элемент <main>.

Вероятно, вы не захотите перезагружать страницу и просто загрузите то, что вам нужно с новой страницы.

Использование метода pushState означает, что вы сможете использовать кнопки браузера Back и Forward для навигации, даже если вы не перезагружаете страницу.

Nifty, eh?

Из MDN:

HTML5 представил history.pushState() и history.replaceState() методы, которые позволяют добавлять и изменять записи истории, соответственно. Эти методы работают совместно с window.onpopstate.

Использование history.pushState() изменяет реферер, который используется в HTTP-заголовок для объектов XMLHttpRequest, созданных после изменения государство. Реферрером будет URL-адрес документа, окно которого это во время создания объекта XMLHttpRequest.

Пример

Там отличный пример в MDN здесь и соответствующий Git repo здесь.