HTML+JS实现表格新增行后刷新页面丢失问题如何解决？

你当前的所有表格数据都只保存在JS运行时的内存变量里，页面刷新后JS上下文会完全重置，新增的行数据自然就消失了。另外你代码里的n.preventDefault()和x.preventDefault()是无效写法，n和x都是数字类型变量，没有preventDefault方法，直接删除即可。

使用浏览器自带的localStorage做本地持久化存储，每次新增行后把所有表格数据同步存入localStorage，页面加载时主动读取localStorage里的存储数据，自动渲染到表格中。

JS代码 #

// 页面加载完成后初始化渲染已存储的数据
window.onload = function() {
  renderSavedData()
}

// 读取本地存储的表格数据渲染到页面
function renderSavedData() {
  const savedData = localStorage.getItem('footballTableData')
  if (!savedData) return
  const tableData = JSON.parse(savedData)
  const table = document.getElementById('show')
  tableData.forEach((item, index) => {
    const newRow = table.insertRow(index + 1)
    Object.values(item).forEach(val => {
      const cell = newRow.insertCell()
      cell.innerHTML = val
    })
  })
}

function AddRow() {
  // 读取表单输入的值
  const rowData = {
    kamp: document.getElementById("kamp").value,
    hjemmelag: document.getElementById("hjemmelag").value,
    resultat: document.getElementById("resultat").value,
    bortelag: document.getElementById("bortelag").value,
    gHjemme: document.getElementById("gHjemme").value,
    rHjemme: document.getElementById("rHjemme").value,
    gBorte: document.getElementById("gBorte").value,
    rBorte: document.getElementById("rBorte").value
  }

  // 插入新行到表格
  const table = document.getElementById('show')
  const newRow = table.insertRow(table.rows.length)
  Object.values(rowData).forEach(val => {
    const cell = newRow.insertCell()
    cell.innerHTML = val
  })

  // 同步更新本地存储
  const savedData = localStorage.getItem('footballTableData')
  const tableData = savedData ? JSON.parse(savedData) : []
  tableData.push(rowData)
  localStorage.setItem('footballTableData', JSON.stringify(tableData))

  // 可选：新增后清空输入框
  document.querySelectorAll('input[type="text"]').forEach(input => input.value = '')
}

HTML代码 #

你原有的HTML代码无需修改，替换掉原有的JS代码即可。如果需要清空本地存储的测试数据，可在浏览器控制台执行localStorage.removeItem('footballTableData')。

如果需要多设备同步数据或者永久存储不随浏览器缓存清除丢失，需要把数据提交到后端服务器存入数据库，前端调用接口读取数据渲染即可。

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