JQuery Как при нажатии на кнопку назад вернуться к последнему состоянию предыдущей страницы?
Имеется сайт вопросов и ответов, в нем список вопросов, под ним кнопка "Показать еще", при нажатии на эту кнопку к списку, с помощью ajax, подгружаются новые вопросы (точно также как в сервисе "Ответы@Мейл"), т.е. страница меняется динамически. При переходе к вопросу, а затем обратно к списку с помощью кнопки браузера "Назад", необходимо получить последнее состояние страницы списка вопросов, как это можно реализовать? Подобный механизм реализован как в "Ответы Мейл", так и "Яндекс Кью", по моим догадкам они используют кэширование страницы, на уровне браузера. Как это реализуется?
Ответы (2 шт):
По сути при нажатии на "показать еще", надо загружать вопросов на целую страницу (равносильно нажатию на кнопку следующей страницы). Надо в параметр адреса записывать ?offset=n где n это количество загруженных вопросов. При загрузке вызывать popState и записывать в него текущую урлу. Ну и ловить onpopstate, из него брать урлу и по оффсету из параметра загружать нужное количество вопросов)
Как вариант можно хранить страницу пагинации, на которой находится пользователь и количество отображаемых записей в localStorage
const key = "pagination";
const pagination = {
page: currentPage, // записываем текущую страницу пагинации
countQuestion: countQuestion // записываем к-ство отображаеммых вопросов
};
localStorage.setItem(key, JSON.stringify(pagination));
В момент загрузки страницы проверятьесть ли в localStorage данные пагинации по ключу, если есть, то в ajax запросе мы указываем какие именно данные нам необходимо получить c сервера
const paginationData = localStorage.getItem(key);
if(paginationData) {
const result = JSON.parse(paginationData);
const currentPage = result.page;
const countQuestion = result.countQuestion;
// ES6 более кратко
//const {currentPage, countQuestion} = JSON.parse(paginationData);
if(currentPage && countQuestion) {
ajax...
}
}