Кеширование страницы после загрузки ajax

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

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