Как сохранить / кэшировать DOM, чтобы страница загружалась как есть, когда вы нажимаете кнопку "Назад"?

Question

Я добавляю модели в мою коллекцию моделей приложений js, используя вызовы ajax. когда я нажимаю на модель и перехожу на следующую страницу, я хочу, чтобы все загруженные мной модели все еще были там, когда я нажимал кнопку "Назад". Каков наилучший способ сделать это, чтобы он работал во всех браузерах? это для мобильного интернета. я не могу найти прямой ответ, как я могу использовать bfcache или js history, или есть другой, лучший способ?

Answer 1

Вы можете хранить их в локальном хранилище и ajax для них, только если они не существуют в локальном хранилище.

Так что вместо обычного $.ajax используйте это для ajax, который вы хотите кэшировать:

function storageBasedAjax(url,cb){

    if (localStorage.getItem("myAxaxCache_"+url)){
      cb(localStorage.getItem("myAxaxCache_"+url));
      return;
    }       

   $.ajax({url: url, success: function(result){
     localStorage.setItem("myAxaxCache_"+url,result);
        cb(result);
   }});
}

Просто помните, что вы не хотите перегружать, поэтому, если у вас есть URL с параметром, меняющим каждый вызов, не используйте это, иначе вы перегрузите локальное хранилище