Jekyll如何实现单会话内页面切换时的状态持久化保留

Jekyll是静态站点生成器，构建产物为纯静态HTML/CSS/JS文件，无原生服务端会话状态管理能力，单用户会话周期内的页面状态留存可完全通过前端浏览器存储实现，无需调整Jekyll核心构建逻辑，也无需额外接入后端服务。

核心实现思路 #

利用浏览器原生提供的sessionStorage做存储载体，该存储的生命周期与当前标签页会话绑定，用户关闭标签页后数据自动清除，完全匹配单会话留存的需求，不会长期残留用户测试数据。

具体落地步骤 #

• 为3个测试页面分别配置全局唯一的存储key，例如benchmark-page-1/benchmark-page-2/benchmark-page-3，避免不同页面的测试结果互相污染。
• 改造现有表单提交逻辑：每次拿到API返回结果、完成预处理并将新行插入表格头部后，同步将当前表格的全量结果序列化为JSON，存入sessionStorage对应key下。参考实现代码：

// 新结果插入表格完成后执行持久化
const tableRows = document.querySelectorAll('#result-table tbody tr')
const savedData = Array.from(tableRows).map(row => {
  return Array.from(row.querySelectorAll('td')).map(cell => cell.innerText.trim())
})
sessionStorage.setItem(`api-benchmark-${PAGE_KEY}`, JSON.stringify(savedData))

• 新增页面初始化渲染逻辑：每个页面DOM加载完成时，优先检查sessionStorage中是否存在当前页对应的历史结果，如果存在则解析数据，批量生成表格行渲染到结果区域，直接恢复用户离开前的表格状态。参考实现代码：

document.addEventListener('DOMContentLoaded', () => {
  const tableBody = document.querySelector('#result-table tbody')
  const cached = sessionStorage.getItem(`api-benchmark-${PAGE_KEY}`)
  if (cached) {
    const historyResults = JSON.parse(cached)
    // 存储时已按新到旧顺序排列，直接顺序插入即可
    historyResults.forEach(rowContent => {
      const tr = document.createElement('tr')
      rowContent.forEach(text => {
        const td = document.createElement('td')
        td.innerText = text
        tr.appendChild(td)
      })
      tableBody.appendChild(tr)
    })
  }
})

• 若页面配置了清空结果按钮，在清空表格DOM的逻辑中同步执行sessionStorage.removeItem(api-benchmark-${PAGE_KEY})，保证存储数据和页面展示状态一致。

可选扩展 #

如果后续需要支持用户跨标签页留存测试结果，只需要将上述逻辑中的sessionStorage替换为localStorage即可，其余代码无需调整。localStorage数据会持久存储在用户本地，除非用户主动清除浏览器缓存。

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