页面刷新后HTML Table数据消失，如何实现数据持久化？

这个问题其实挺常见的——页面刷新后，之前通过AJAX获取的数据只存在浏览器内存里，刷新一下就被清空了。要搞定它，我们只需要把获取到的数据存到**本地存储（localStorage）**里，页面加载时再从本地存储读取并渲染就行，具体操作如下：

1. 抽离表格渲染逻辑 #

先把渲染表格的代码单独写成一个函数，这样不管是搜索成功还是页面加载恢复数据，都能复用这个逻辑，避免重复写代码：

function renderTable(data) {
  const table = document.getElementById('tab');
  // 先清空表格原有内容
  table.innerHTML = '';
  
  // 如果没有数据，直接返回
  if (!data || data.length === 0) return;
  
  // 创建表头
  const headerRow = document.createElement('tr');
  Object.keys(data[0]).forEach(key => {
    const th = document.createElement('th');
    th.textContent = key;
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);
  
  // 创建表格内容行
  data.forEach(item => {
    const row = document.createElement('tr');
    Object.values(item).forEach(value => {
      const td = document.createElement('td');
      td.textContent = value;
      row.appendChild(td);
    });
    table.appendChild(row);
  });
}

2. 修改搜索按钮逻辑，保存数据到本地存储 #

点击搜索按钮获取数据后，除了渲染表格，还要把数据存到localStorage里（注意要转成JSON字符串，因为localStorage只能存储字符串类型）：

$("#btnSearch").click(function() {
  $.getJSON("http://localhost:8080/...", function(data) {
    // 渲染表格
    renderTable(data);
    // 把数据存到localStorage，命名可以自己定，比如searchResult
    localStorage.setItem('searchResult', JSON.stringify(data));
  });
});

3. 页面加载时自动恢复数据 #

页面初始化（包括刷新后）的时候，检查localStorage里有没有保存的搜索结果，如果有就直接渲染表格：

// 页面加载完成后执行
$(document).ready(function() {
  // 从localStorage读取数据
  const savedData = localStorage.getItem('searchResult');
  if (savedData) {
    // 把字符串转成JSON对象
    const data = JSON.parse(savedData);
    // 渲染表格
    renderTable(data);
  }
});

补充小提示 #

• 如果希望关闭浏览器后数据就自动消失，可以用sessionStorage代替localStorage，用法完全一样，只是存储有效期不同。
• 如果后续用户用不同的条件搜索，新的数据会自动覆盖之前存储的内容，刷新后显示的始终是最新的搜索结果。

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