在前端开发中，我们经常会遇到需要动态创建 HTML 元素来展示用户输入或应用程序状态的场景。然而，这些通过 JavaScript 动态添加到 DOM（文档对象模型）的元素，在用户刷新页面时会随之消失，因为浏览器会重新加载 HTML、CSS 和 JavaScript 文件，并重置整个 DOM 结构。为了解决这一问题，我们可以利用客户端存储机制，如 localStorage，来持久化这些动态生成的数据。

1. 理解问题：动态内容的短暂性

当使用 JavaScript 的 document.createElement() 和 appendChild() 等方法创建并插入元素时，这些操作只影响当前会话的 DOM。一旦页面被重新加载、关闭或导航到其他页面，浏览器会丢弃当前的 DOM 状态，并从服务器重新获取页面内容。因此，所有动态添加的元素都会丢失。

例如，一个表单提交后生成表格行的应用，在不进行数据持久化处理的情况下，刷新页面后表格将变为空白。

  
发布信息
  

    派对名称：
    
  
  
  发布

// 原始 JavaScript 示例 (简化)
let button = document.querySelector('button[type="button"]');
button.addEventListener("click", () => {
  let nom = document.getElementById("nom").value;
  // ... 获取其他表单数据
  if (nom !== "") {
    let table = document.createElement('table');
    document.querySelector('body').appendChild(table);
    // ... 创建表头和数据行
    alert("表单已提交！");
  }
});

上述代码能正常工作，但刷新页面后，动态生成的

立即学习“前端免费学习笔记（深入）”；

2. 解决方案：使用 localStorage 进行数据持久化

localStorage 是浏览器提供的一种客户端存储机制，允许网页在用户的浏览器中存储键值对数据。这些数据没有过期时间，即使浏览器关闭再打开，数据依然存在，直到被显式清除。这使得它非常适合存储需要在页面刷新后保持不变的用户数据或应用程序状态。

2.1 localStorage 的基本操作

• 存储数据： localStorage.setItem(key, value)
  • key: 字符串，数据的名称。
  • value: 字符串，要存储的数据。非字符串数据会被自动转换为字符串。
• 获取数据： localStorage.getItem(key)
  • 返回与 key 关联的字符串值。如果 key 不存在，则返回 null。
• 移除数据： localStorage.removeItem(key)
  • 移除与 key 关联的数据。
• 清除所有数据： localStorage.clear()
  • 清除当前域名下的所有 localStorage 数据。

2.2 实现持久化动态生成表格的步骤

要实现动态生成表格的持久化，我们需要在两个关键时刻进行操作：

1. 数据提交时： 当用户点击“发布”按钮提交表单并生成新的表格行时，将新的行数据存储到 localStorage 中。
2. 页面加载时： 当页面首次加载或刷新时，检查 localStorage 中是否有之前存储的数据，如果有，则读取这些数据并重新构建表格。

3. 完整实现示例

下面是一个结合 localStorage 实现动态表格持久化的完整代码示例。

ChartGen

AI快速生成专业数据图表

下载

3.1 HTML 结构

  
  
  
  



  

    
发布派对信息
    

      派对名称：
      
    
    

      派对地址：
      
    
    

      容纳人数：
      
    
    

      联系电话 (选填)：
      
    
    

      开始时间：
      
    
    

      结束时间：
      
    
    发布
  

  

    
  

  
  
  

3.2 JavaScript 代码 (script.js)

// 定义 localStorage 的键名，用于存储表格数据
const STORAGE_KEY = "pool_party_data_v1";

// 获取发布按钮
let publishButton = document.getElementById('publishButton');
// 获取表格容器
let tableContainer = document.getElementById('table-container');

/**
 * 创建或获取表格元素，并确保表头存在。
 * @param {boolean} isFirstTime 是否是首次创建表格（例如页面加载时）。
 * @returns {HTMLTableElement} 表格元素。
 */
function ensureTableStructure(isFirstTime) {
  let table = document.querySelector('table'); // 尝试获取现有表格

  if (!table) { // 如果表格不存在，则创建新表格
    table = document.createElement('table');
    tableContainer.appendChild(table); // 将表格添加到指定容器

    // 创建表头
    let headerRow = document.createElement('tr');
    const headers = [
      "派对名称", "开始时间", "结束时间", "地址", "容纳人数", "联系电话"
    ];
    headers.forEach(text => {
      let th = document.createElement('th');
      th.innerHTML = text;
      headerRow.appendChild(th);
    });
    table.appendChild(headerRow);
  }
  return table;
}

/**
 * 从 localStorage 加载并渲染表格数据。
 */
function loadAndRenderTableData() {
  const storedData = localStorage.getItem(STORAGE_KEY);
  if (storedData) {
    let table = ensureTableStructure(true); // 确保表格和表头存在

    // 使用 '¬' 分隔符拆分存储的行数据
    const rowsHtml = storedData.split('¬');

    rowsHtml.forEach(rowHtml => {
      if (rowHtml.trim() !== '') { // 避免添加空行
        let newRow = document.createElement('tr');
        newRow.innerHTML = rowHtml; // 直接将存储的 HTML 字符串设置为行内容
        table.appendChild(newRow);
      }
    });
  }
}

// 页面加载时执行
document.addEventListener('DOMContentLoaded', () => {
  loadAndRenderTableData(); // 加载并渲染之前保存的表格数据
});


// 监听发布按钮的点击事件
publishButton.addEventListener("click", (event) => {
  event.preventDefault(); // 阻止表单默认提交行为，如果按钮在 form 内部

  // 获取表单数据
  let nom = document.getElementById("nom").value.trim();
  let adresse = document.getElementById("adresse").value.trim();
  let capacite = document.getElementById("capacite").value.trim();
  let phone = document.getElementById("phone").value.trim();
  let heure1 = document.getElementById("heure1").value.trim();
  let heure2 = document.getElementById("heure2").value.trim();

  // 验证必填字段
  if (nom === "" || adresse === "" || capacite === "" || heure1 === "" || heure2 === "") {
    alert("请填写所有必填信息！");
    return;
  }

  // 确保表格结构存在
  let table = ensureTableStructure(false);

  // 创建新的数据行
  let newRow = document.createElement('tr');
  const rowData = [nom, heure1, heure2, adresse, capacite, phone];

  rowData.forEach(data => {
    let td = document.createElement('td');
    td.innerHTML = data;
    newRow.appendChild(td);
  });

  // 将新行添加到表格
  table.appendChild(newRow);

  // 将新行的 innerHTML 存储到 localStorage
  let currentStoredRows = localStorage.getItem(STORAGE_KEY) || '';
  // 使用特殊字符 '¬' 作为分隔符，避免与 HTML 内容冲突
  let updatedStoredRows = currentStoredRows + '¬' + newRow.innerHTML;
  localStorage.setItem(STORAGE_KEY, updatedStoredRows);

  alert("表单已提交并保存！");

  // 清空表单字段以便下次输入
  document.getElementById("nom").value = '';
  document.getElementById("adresse").value = '';
  document.getElementById("capacite").value = '';
  document.getElementById("phone").value = '';
  document.getElementById("heure1").value = '';
  document.getElementById("heure2").value = '';
});

// 可选：添加一个清除 localStorage 的按钮，用于测试或重置
// let clearButton = document.createElement('button');
// clearButton.textContent = '清除所有数据';
// clearButton.addEventListener('click', () => {
//   localStorage.removeItem(STORAGE_KEY);
//   tableContainer.innerHTML = ''; // 清空表格显示
//   alert('所有数据已清除！');
// });
// document.body.appendChild(clearButton);

4. 代码解析与注意事项

4.1 ensureTableStructure 函数

这个函数负责检查页面上是否存在表格。如果不存在，它会创建一个新的

4.3 publishButton 事件监听器

当用户点击“发布”按钮时：

1. event.preventDefault()：阻止按钮的默认行为（例如，如果按钮在一个
   标签内，它可能会导致页面刷新）。
2. 获取所有表单字段的值。
3. 进行基本的输入验证。
4. 调用 ensureTableStructure 确保表格存在。
5. 创建一个新的

// 存储对象示例
const partyData = {
  nom: nom,
  adresse: adresse,
  capacite: capacite,
  phone: phone,
  heure1: heure1,
  heure2: heure2
};
let allParties = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
allParties.push(partyData);
localStorage.setItem(STORAGE_KEY, JSON.stringify(allParties));

// 读取对象示例
const storedParties = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
storedParties.forEach(party => {
  // 根据 party 对象的内容重新构建表格行
});

使用 JSON 存储数据，可以更灵活地处理数据，例如编辑或删除特定行。

4.5 localStorage 的局限性

• 存储容量： 大多数浏览器对 localStorage 的存储容量有限制，通常为 5MB 到 10MB。不适合存储大量数据。
• 同步操作： localStorage 的操作是同步的，这意味着在读写数据时会阻塞主线程。频繁或大量操作可能导致页面卡顿。
• 安全性： localStorage 中的数据没有加密，容易受到跨站脚本 (XSS) 攻击。不应存储敏感信息。
• 仅限字符串： localStorage 只能存储字符串。存储 JavaScript 对象时需要进行序列化（如 JSON.stringify()）。

5. 总结

通过 localStorage，我们可以轻松实现前端动态生成内容的持久化，确保用户数据在页面刷新后不会丢失，从而显著提升用户体验。在设计持久化方案时，应根据数据的复杂度和数量选择合适的存储策略，并注意 localStorage 的容量和安全限制。对于更复杂或大量的数据存储需求，可以考虑使用 IndexedDB 或将数据发送到后端服务器进行持久化。