本文将指导您如何利用JavaScript和Web Storage API（特别是localStorage）解决前端页面中动态生成的HTML元素在页面重载后消失的问题。通过将表单数据结构化存储在客户端，并在页面加载时重新构建DOM，确保用户输入的信息能够持久化显示，显著提升用户体验和数据完整性。
问题剖析：动态DOM元素的短暂生命
在前端开发中，我们经常使用javascript动态地创建和修改html元素（dom）。例如，当用户填写表单并点击提交按钮后，页面上会生成一个新的表格行来显示这些数据。然而，这种动态创建的元素只存在于当前页面的内存中。一旦用户刷新页面、关闭浏览器或导航到其他页面，这些通过javascript生成的dom元素就会随之消失，因为浏览器会重新加载原始的html、css和javascript文件，而不会保留之前运行时动态生成的状态。
为了解决这个问题，我们需要一种机制来“记住”这些动态生成的数据，并在页面重新加载时能够将它们恢复到DOM中。
解决方案核心：Web Storage API (localStorage)
Web Storage API 提供了一种在客户端存储键值对数据的方法，主要包括 localStorage 和 sessionStorage。它们具有以下特点：
localStorage:持久性: 存储的数据没有过期时间，即使浏览器关闭再打开，数据依然存在，除非用户手动清除。作用域: 数据在同一源（协议、域名、端口）下的所有页面之间共享。容量: 通常为 5MB 或更多。sessionStorage:会话性: 数据只在当前浏览器会话期间有效。当浏览器标签页或窗口关闭时，数据会被清除。作用域: 数据只在创建它的标签页或窗口中可用。
对于需要在页面重载后依然保留的数据，localStorage 是一个理想的选择。我们将利用它来存储用户通过表单提交的数据，并在页面加载时将其取出并重新渲染。
实现步骤详解
要实现动态生成DOM元素的持久化，我们需要完成以下几个关键步骤：
立即学习“前端免费学习笔记（深入）”；
HTML 结构准备：创建表单和用于显示数据的容器。JavaScript 数据收集与持久化：在表单提交时，收集数据，将其结构化，并存储到 localStorage 中。页面加载时的数据恢复与渲染：在页面加载完成时，从 localStorage 读取数据，并动态地将这些数据渲染成HTML元素。
步骤一：HTML 结构准备
首先，我们定义一个简单的HTML表单和放置生成表格的容器。
持久化动态DOM元素教程 body { font-family: Arial, sans-serif; margin: 20px; } #party div { margin-bottom: 10px; } label { display: inline-block; width: 150px; } input[type="text"] { width: 200px; padding: 5px; } button { padding: 8px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; } button:hover { background-color: #0056b3; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; }发布活动
步骤二：JavaScript 数据收集与持久化
我们将编写JavaScript代码来处理表单提交，收集数据，并将其存储为JavaScript对象数组，然后使用 JSON.stringify() 将其转换为字符串存储到 localStorage。
// script.jsconst storageKey = "activity_data"; // localStorage 的键名const publishButton = document.getElementById('publishButton');const tableContainer = document.getElementById('tableContainer');/** * 确保表格存在并返回表格元素。如果不存在，则创建包含表头的表格。 * @returns {HTMLTableElement} 表格元素 */function ensureTableExists() { let table = document.querySelector('#tableContainer table'); if (!table) { table = document.createElement('table'); tableContainer.appendChild(table); const headerRow = document.createElement('tr'); const headers = ["活动名称", "开始时间", "结束时间", "地址", "容纳人数", "电话"]; headers.forEach(text => { const th = document.createElement('th'); th.innerHTML = text; headerRow.appendChild(th); }); table.appendChild(headerRow); } return table;}/** * 将数据渲染为表格行并添加到DOM。 * @param {Object} data - 包含活动信息的对象。 * @param {HTMLTableElement} table - 要添加行的表格元素。 */function renderTableRow(data, table) { const row = document.createElement('tr'); const fields = [data.nom, data.heure1, data.heure2, data.adresse, data.capacite, data.phone]; fields.forEach(value => { const td = document.createElement('td'); td.innerHTML = value; row.appendChild(td); }); table.appendChild(row);}/** * 从 localStorage 加载数据并渲染到页面。 */function loadAndRenderData() { const storedData = localStorage.getItem(storageKey); if (storedData) { const activities = JSON.parse(storedData); if (activities.length > 0) { const table = ensureTableExists(); // 清空现有数据行，只保留表头 while (table.rows.length > 1) { table.deleteRow(1); } activities.forEach(activity => { renderTableRow(activity, table); }); } }}// 监听发布按钮点击事件publishButton.addEventListener('click', (event) => { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单值 const nom = document.getElementById("nom").value; const adresse = document.getElementById("adresse").value; const capacite = document.getElementById("capacite").value; const phone = document.getElementById("phone").value; const heure1 = document.getElementById("heure1").value; const heure2 = document.getElementById("heure2").value; // 简单验证 if (!nom || !adresse || !capacite || !phone || !heure1 || !heure2) { alert("请填写所有必填项！"); return; } // 构造数据对象 const newActivity = { nom, adresse, capacite, phone, heure1, heure2 }; // 从 localStorage 获取现有数据，如果不存在则初始化为空数组 let activities = JSON.parse(localStorage.getItem(storageKey) || '[]'); activities.push(newActivity); // 添加新数据 // 将更新后的数据存回 localStorage localStorage.setItem(storageKey, JSON.stringify(activities)); // 渲染新行到DOM const table = ensureTableExists(); renderTableRow(newActivity, table); 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 恢复数据并渲染document.addEventListener('DOMContentLoaded', loadAndRenderData);
步骤三：页面加载时的数据恢复与渲染
在上述JavaScript代码中，我们已经在 DOMContentLoaded 事件监听器中调用了 loadAndRenderData() 函数。这个函数负责：
从 localStorage 中获取存储的字符串数据。使用 JSON.parse() 将字符串转换回JavaScript对象数组。遍历数组中的每个数据对象。为每个数据对象调用 renderTableRow() 函数，将其渲染成表格行并添加到DOM中。
这样，无论页面刷新多少次，只要 localStorage 中有数据，这些数据就会在页面加载时被自动恢复并显示出来。
完整代码示例
将上述HTML和JavaScript代码分别保存为 index.html 和 script.js 文件，并在同一目录下。
index.html:
持久化动态DOM元素教程 body { font-family: Arial, sans-serif; margin: 20px; } #party div { margin-bottom: 10px; } label { display: inline-block; width: 150px; } input[type="text"] { width: 200px; padding: 5px; } button { padding: 8px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; } button:hover { background-color: #0056b3; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; }发布活动
script.js:
const storageKey = "activity_data"; // localStorage 的键名const publishButton = document.getElementById('publishButton');const tableContainer = document.getElementById('tableContainer');/** * 确保表格存在并返回表格元素。如果不存在，则创建包含表头的表格。 * @returns {HTMLTableElement} 表格元素 */function ensureTableExists() { let table = document.querySelector('#tableContainer table'); if (!table) { table = document.createElement('table'); tableContainer.appendChild(table); const headerRow = document.createElement('tr'); const headers = ["活动名称", "开始时间", "结束时间", "地址", "容纳人数", "电话"]; headers.forEach(text => { const th = document.createElement('th'); th.innerHTML = text; headerRow.appendChild(th); }); table.appendChild(headerRow); } return table;}/** * 将数据渲染为表格行并添加到DOM。 * @param {Object} data - 包含活动信息的对象。 * @param {HTMLTableElement} table - 要添加行的表格元素。 */function renderTableRow(data, table) { const row = document.createElement('tr'); const fields = [data.nom, data.heure1, data.heure2, data.adresse, data.capacite, data.phone]; fields.forEach(value => { const td = document.createElement('td'); td.innerHTML = value; row.appendChild(td); }); table.appendChild(row);}/** * 从 localStorage 加载数据并渲染到页面。 */function loadAndRenderData() { const storedData = localStorage.getItem(storageKey); if (storedData) { const activities = JSON.parse(storedData); if (activities.length > 0) { const table = ensureTableExists(); // 清空现有数据行，只保留表头 while (table.rows.length > 1) { // 保持表头行 (索引0) table.deleteRow(1); } activities.forEach(activity => { renderTableRow(activity, table); }); } }}// 监听发布按钮点击事件publishButton.addEventListener('click', (event) => { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单值 const nom = document.getElementById("nom").value; const adresse = document.getElementById("adresse").value; const capacite = document.getElementById("capacite").value; const phone = document.getElementById("phone").value; const heure1 = document.getElementById("heure1").value; const heure2 = document.getElementById("heure2").value; // 简单验证 if (!nom || !adresse || !capacite || !phone || !heure1 || !heure2) { alert("请填写所有必填项！"); return; } // 构造数据对象 const newActivity = { nom, adresse,
以上就是使用 localStorage 实现前端页面重载后动态生成DOM元素的持久化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1578587.html
微信扫一扫 
支付宝扫一扫 
