История pushState и страница кеширования

Если вы включите http-кеширование, добавив соответствующие заголовки в ваши ответы (Cache-Control, Expires, Last-Modified и т. Д.), Эти ответы будут сохранены в кеше. Кеша нет ни одного. Есть кеш сервера и нисходящие кеши (ISP, прокси, браузер). Один из них - кеш браузера.

Предположим, вы кешируете ответы. Имейте в виду, что http-ответ будет кэшироваться независимо от его типа содержимого (html, json и т. Д.). Итак, вы загружаете страницу A, затем щелкаете ссылку, которая обновляет страницу с помощью ajax и URL-адреса с историей api. Это страница B. Затем вы переходите на страницу C. Ответы A, B и C хранятся в кеше браузера. Но если вы вернетесь на страницу B, браузер не загрузит ее автоматически, поскольку вы использовали API истории для этого URL-адреса. Он просто обновляет URL-адрес и запускает событие popstate.

1. Один из подходов - прослушать popstate и вручную выполнить тот же вызов ajax. Поскольку ответ B уже хранится в кеше браузера, он будет извлечен оттуда (если он не был изменен на сервере).

2. Другой подход состоял бы в том, чтобы сохранить данные, полученные из ajax, в объекте с именем state и связать его с отправленным URL-адресом:

   state = { your_key: your_value }
   history.pushState(state, title, url)
   

   Затем на кнопке «Назад» перехватите событие popstate, получите связанный с ним объект состояния, получите доступ к своим данным и измените страницу.

   $(window).on('popstate', function(event) { 
      var state = event.originalEvent.state; 
      if (state) { 
         // use it to modify the page 
      }else{ 
         // ajax call to get the data 
      }
   });
   

   В этом случае, если состояние существует, вы фактически не используете кеш браузера для получения ответа.

Имейте в виду, что объект состояния хранится на диске клиента и имеет ограниченный размер. Таким образом, лучше хранить в объекте состояния ссылку на данные (например, идентификатор), а сами данные хранить в памяти. Это предполагает, что у вас есть приложение Signle Page, все страницы которого загружены с помощью ajax. (Обычная загрузка страницы очистит память вашего клиента)