如何保存/缓存 dom，以便在您点击后退按钮时页面按原样加载？答案

【问题标题】：How to save/cache the dom so that the page loads as-is when you hit the back button?如何保存/缓存 dom，以便在您点击后退按钮时页面按原样加载？
【发布时间】：2017-03-13 17:22:19
【问题描述】：

我使用 ajax 调用将模型添加到我的 js 应用模型集合中。当我单击一个模型并转到下一页时，我希望我加载的所有模型在我点击后退按钮时仍然存在。什么是最好的方法来做到这一点，以便它适用于所有浏览器？这是针对移动网络的。我找不到直接的答案，我如何使用 bfcache，或者 js 历史，或者还有其他更好的方法吗？

【问题讨论】：

如果页面仍在 bfcache 中，至少 firefox 实际上会逐字恢复页面（DOM 和 javascript 状态），除非这已被某些事件处理程序抑制。
我认为没有人会在移动设备上使用 FF，试图让它在 safari 和 chrome 上运行，主要针对 ios 和 android 移动网络用户

标签： javascript ajax dom web-deployment bfcache

【解决方案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，每次调用都会改变，不要使用它，否则你会超载本地存储

【讨论】：

我很确定浏览器在默认使用后退按钮时不会保存 Ajax 内容。
它节省现金，与后退按钮无关。
浏览器目前在 ios 上的移动 safari 上没有保存任何内容
@PatO'Keefe 我说可能。无论如何，我的主要解决方案是本地存储，这是一个很好的解决方案。
将 dom 保存到本地存储的最佳方法是什么？ @O_Z 我没有投反对票