JS解决ajax无法后退的问题记录

history.pushState(stateObj, title, url);
history.replaceState(stateObj, title, url);

// 发送Ajax请求之前
history.pushState(stateObj, title, url);
// 模拟Ajax请求
setTimeout(function() {
    // 请求成功后更新页面内容
    document.body.innerHTML = '<h1>Ajax Content Loaded</h1>';
    // 请求完成后使用replaceState更新浏览器历史记录，以避免出现额外的历史记录条目
    history.replaceState(stateObj, title, url);
}, 1000);
// 用户点击后退按钮时，可以回到之前的页面状态
window.onpopstate = function(event) {
    if (event.state) {
        // 恢复之前的页面状态
        document.body.innerHTML = '<h1>Original Page Content</h1>';
    }
};

window.addEventListener('popstate', function(event) {
  // 当用户点击后退按钮时，从localStorage加载数据或重新发起Ajax请求
  var cachedData = localStorage.getItem('cachedData');
  if (cachedData) {
    // 使用缓存的数据更新页面
    updatePage(JSON.parse(cachedData));
  } else {
    // 重新发起Ajax请求
    makeAjaxRequest();
  }
});
function makeAjaxRequest() {
  // 发起Ajax请求
  $.ajax({
    url: 'your-endpoint',
    success: function(data) {
      // 请求成功，更新页面并缓存数据
      updatePage(data);
      localStorage.setItem('cachedData', JSON.stringify(data));
    }
  });
}
function updatePage(data) {
  // 更新页面的函数
}
// 当用户触发Ajax请求时，可以调用makeAjaxRequest
makeAjaxRequest();