Возможно ли сохранять (без перезагрузки) состояние страницы AJAX при нажатии кнопки "Назад"?

StackOverflow https://stackoverflow.com/questions/34227

  •  09-06-2019
  •  | 
  •  

Вопрос

Я знаком с несколькими подходами к тому, чтобы заставить кнопку "Назад" работать в приложениях AJAX в различных ситуациях, но я не нашел решения, которое будет корректно работать в моем конкретном сценарии.

Страницы, с которыми я работаю, - это интерфейс поиска по сайту.Вы вводите термины в обычное поле поиска, нажимаете "Перейти" и переходите на страницу результатов поиска.На странице результатов поиска есть множество элементов управления пользовательского интерфейса для фильтрации / сортировки результатов поиска, чтобы найти то, что вы ищете.Выполнение некоторых операций, запускаемых этими элементами управления, может занять (относительно) много времени (напримернесколько секунд).

Эта задержка допустима в том случае, когда пользователь изначально фильтрует / сортирует свои результаты...там есть хороший спиннер AJAX и так далее...однако, когда пользователь нажимает на результат поиска, а затем на кнопку "Назад", я бы хотел, чтобы страница мгновенно восстанавливалась в том состоянии, в котором она была при переходе.

Я могу восстановить состояния, используя идентификаторы IFRAMEs / fragment в качестве словаря истории страниц, но в итоге происходит то, что когда пользователь впервые нажимает кнопку "Назад", загружается начальная страница, затем он (повторно) выполняет AJAX-запрос для возврата состояния страницы, что запускает AJAX-счетчик и еще одно ожидание, возможно, в несколько секунд.

Есть ли какой-либо подход, который не требует такой двухэтапной загрузки страницы, когда пользователь возвращается на страницу с помощью кнопки "НАЗАД"?

Отредактировано для добавления:Я неравнодушен к jquery, но я был бы доволен решениями, которые зависят от других библиотек / наборов инструментов или являются автономным / необработанным javascript.

Отредактировано для добавления:Мне следовало бы добавить, что я пытаюсь избегать файлов cookie / сеансов, потому что это не позволяет людям открывать несколько окон / вкладок браузера и одновременно манипулировать разными наборами результатов поиска.

Редактировать:Мэтт, не могли бы вы подробнее рассказать о предлагаемом вами решении (запуск события смены страницы с помощью идентификатора фрагмента)?Я вижу, как это помогло бы при нажатии кнопки "НАЗАД" на той же странице, но без возврата на страницу результатов поиска после нажатия на определенный результат.

Это было полезно?

Решение

Попробуйте использовать Локальное хранилище объект.Вот библиотека кроссбрауера jStorage - хранилище и WEBSHIMS json-хранилище

Другие советы

Просто используйте печенье.

Исследовали ли вы Менеджер истории браузера YUI?

Поможет ли это запустить событие изменения страницы, используя "Добавить некоторую информацию в # в конце URL-адреса"?

Таким образом, нажатие кнопки "Назад" на самом деле не должно изменять страницу, и вы должны иметь возможность восстановить состояние без первой загрузки страницы.

Используйте что-то постоянное, привязанное к профилю пользователя.

Файлы cookie и сеансы - хорошие идеи, но вы также можете сохранить эти данные в базе данных.Это дает вам дополнительное преимущество - возможность сохранять настройки фильтрации пользователя в разных сеансах просмотра.(если, например, он искал что-то в офисе, а затем решил продолжить поиски, когда вернется домой).

Все зависит от сложности фильтров и погоды, или нет, это то, что, по вашему мнению, пользователь захочет использовать в разных сеансах просмотра..

Отредактировано для добавления:Я должен был добавить, что Я пытаюсь избегать файлов cookie / сеансов потому что это не позволяет людям открывать несколько окон / вкладок браузера и одновременно манипулировать разными наборами результатов поиска .

Вы можете создать случайный токен и присвоить его идентификатору фрагмента.

  • при загрузке первой страницы создайте токен, если идентификатор фрагмента не задан
  • перед переходом сохраните все временные данные ajax в файле cookie с этим токеном в качестве индекса.
  • при ответном нажатии, если у вас установлен идентификатор фрагмента, загрузите данные из соответствующего токена в файл cookie.
  • вы даже можете добавить поле "время" к токенам с истекшим сроком действия и т.д...

образец файла cookie (JSON):

{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top