Как получить доступ к состоянию истории при навигации между 2 страницами с помощью pushstate?

Question

Я работаю над своим первым PWA и сейчас немного изучаю, прежде чем приступить к написанию какого-либо кода. Одна вещь, которую я могу обернуть вокруг себя, это навигация между двумя кэшированными страницами.

Мой PWA состоит из двух страниц: страница A, на которой показан список элементов и страница B, к которой вы переходите, щелкая элемент на странице. A.

Я собирался использовать history.pushstate для хранения идентификатора элемента, щелкнувшего на странице A, а затем, когда страница B загружена, он должен подготовить состояние и запросить необходимые данные в зависимости от того, что в магазине.

Я создал тестовую страницу и вижу, что добавление console.log('Hello Kitty') на страницу B инициировано, поэтому выполнение JS на странице B должно быть простым. Но когда я пытаюсь прочитать из history.state на странице B, он становится пустым.

Мой вопрос заключается в том, как перемещаться между страницами A и B и читать то, что я сохранил в history.state, когда страница B загружен?

У меня пока нет реального кода. И я планирую использовать веб-компоненты, но без фреймворка или какой-либо библиотеки, просто vanilla JavaScript.

Answer 1

Я собирался использовать history.pushstate для сохранения идентификатора элемента, щелкнувшего на странице A, а затем, когда страница B загружена, он должен подготовить состояние и запросить необходимые данные в зависимости от того, что в магазине.

history.pushState не предназначено для хранения. Тем не менее, вы можете перемещаться от A к B с помощью пользовательского объекта состояния с JavaScript:

На странице A:

history.pushState(obj, "", "B");
location.reload();

На странице B:

console.log(history.state); // Should log `obj`

Вы не можете "сохранить" состояние, перейдите к B, используя обычную гиперссылку, и получите доступ к состоянию. Состояния истории были созданы для навигации в одностраничном веб-приложении без необходимости загрузки новых страниц. Я бы предпочел использовать строку запроса в URL для B, в данном случае.