Кэширование страницы после АЯКС загрузки

Question

Я использую Jquery Ajax, чтобы загрузить больше контента на мою страницу, когда пользователь прокрутки в нижней части страницы, например:

$(window).scroll(function(){ 
    if($(window).scrollTop() == $(document).height() - $(window).height()){ 
     $.ajax({ 
     url: /* my url goes here */, 
     cache: true, 
     success: function(html){ /*append html to the bottom of page*/ } 
     }); 
    } 
}); 

Проблема заключается в том, что: когда пользователь нажимает некоторые ссылку в затем нажмите кнопку «Назад», новый загруженный контент до исчезновения. Как сохранить новый контент? Заранее спасибо.

Answer 1

При нажатии кнопки «Назад» страница возвращается в исходное состояние, сохраненное в истории браузера. Ajax имеет тенденцию «ломать» кнопку «Назад».

Вы можете сохранить некоторый флаг в своем сеансе, чтобы сказать, какой контент вы загрузили через ajax на последнем представлении. Когда перезагрузка страницы вы можете проверить с сервером, что было в предыдущем состоянии страницы.

Альтернативно изменить идентификатор фрагмента, когда вы выполняете вызов ajax, используя: window.location.hash("new-url-hash"). Вам все равно нужно выполнить начальную проверку с помощью javascript, чтобы узнать, что является частью идентификатора фрагмента URL-адреса. Если вы измените какую-либо другую часть свойства location, страница перезагрузится.

HTML5 добавляет в метод pushState() изменение истории браузера. См. Документы mozilla here. pushState() не вызывает перезагрузку страницы.