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

Question

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

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 的参数会更改每个调用，请不要使用此选项，否则您将导致本地存储过载