pushState: для чего именно нужен объект состояния?

Возьмем этот небольшой пример - запустить скрипт:

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

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 и объект состояния:

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

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

2. Затем мы прослушиваем событие popstate, чтобы знать, когда нам нужно обновить выбранный цвет, а именно:

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

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

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

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

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

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

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

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

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

Это круто