浏览器后退时如何保留页面内partial view的HTML内容

原因说明 #

浏览器自带的往返缓存（bfcache） 机制会默认保留用户在表单内输入的内容，这是浏览器为了提升用户体验做的默认处理，和页面本身的业务逻辑无关。
而你通过AJAX动态插入到 <div id="ajaxPartialView"></div> 容器内的partial view内容属于JS动态生成的DOM，这类内容不会被浏览器的默认状态保留机制记录，且你仅在点击搜索按钮时触发AJAX请求，后退回到页面时没有对应的逻辑根据输入框已保留的内容重新拉取渲染表格，因此容器会保持初始的空状态。

可选解决方案 #

方案1：页面加载时自动触发搜索（改造成本最低） #

在页面DOM加载完成的回调中增加判断：如果搜索框存在非空内容，直接调用搜索按钮绑定的AJAX查询逻辑，自动加载对应表格。
参考代码：

document.addEventListener('DOMContentLoaded', function () {
  const searchInput = document.querySelector('#你的搜索框ID')
  if (searchInput.value.trim()) {
    // 直接调用你已有的搜索方法
    handleSearch()
  }
})

方案2：同步搜索参数到URL（体验最优） #

每次搜索时通过History API把搜索关键词写入URL的查询参数中，既可以解决后退加载问题，还支持用户直接分享、保存搜索结果页。

实现逻辑：

1. 搜索时更新URL参数（不刷新页面）

function handleSearch() {
  const keyword = document.querySelector('#searchInput').value.trim()
  // 更新URL查询参数
  const url = new URL(window.location)
  url.searchParams.set('keyword', keyword)
  window.history.pushState({ keyword }, '', url)
  // 原有AJAX拉取partial view的逻辑保持不变
  // ...
}

2. 监听页面加载和前进后退事件，自动触发搜索

// 页面首次加载时读取URL参数
window.addEventListener('load', function () {
  const params = new URLSearchParams(window.location.search)
  const keyword = params.get('keyword')
  if (keyword) {
    document.querySelector('#searchInput').value = keyword
    handleSearch()
  }
})
// 监听浏览器前进/后退操作
window.addEventListener('popstate', function (e) {
  if (e.state?.keyword) {
    document.querySelector('#searchInput').value = e.state.keyword
    handleSearch()
  } else {
    document.querySelector('#ajaxPartialView').innerHTML = ''
  }
})

方案3：本地缓存搜索结果（不暴露搜索参数） #

如果不想把搜索参数放在URL中，可以用sessionStorage缓存搜索关键词和渲染结果，页面加载时直接读取缓存渲染：

// 搜索成功后写入缓存
function onSearchSuccess(keyword, html) {
  document.querySelector('#ajaxPartialView').innerHTML = html
  sessionStorage.setItem('searchKeyword', keyword)
  sessionStorage.setItem('searchResult', html)
}
// 页面加载时读取缓存
document.addEventListener('DOMContentLoaded', function () {
  const savedKeyword = sessionStorage.getItem('searchKeyword')
  const savedResult = sessionStorage.getItem('searchResult')
  if (savedKeyword && savedResult) {
    document.querySelector('#searchInput').value = savedKeyword
    document.querySelector('#ajaxPartialView').innerHTML = savedResult
  }
})

注意需要补充缓存失效逻辑，比如用户主动清空搜索框时同步删除对应缓存，避免展示过期内容。

内容的提问来源于stack exchange，提问作者Notch