登录
首页 >  文章 >  前端

localStorage保存数据方法详解

时间：2025-10-08 22:21:35 495浏览 收藏

还在为页面刷新后动态生成的HTML元素消失而烦恼吗？本文将详细介绍如何利用JavaScript的localStorage API，轻松实现**页面刷新数据保留**功能，解决前端开发中动态内容短暂性的问题。通过在用户提交表单时将数据存储到localStorage，并在页面加载时从localStorage中检索并重新渲染这些数据，确保用户创建的内容在浏览器会话之间持久存在，极大地提升用户体验。了解localStorage的基本操作，掌握存储、获取、移除和清除数据的技巧，并通过完整示例代码，一步步实现动态表格的持久化。本文还深入探讨了数据序列化与反序列化、localStorage的局限性等关键知识点，助你全面掌握**localStorage实现页面刷新数据保留**的实用方法，打造更流畅的用户体验。

如何使用 localStorage 实现动态生成 HTML 元素的页面刷新持久化

本文详细介绍了如何利用 JavaScript 的 localStorage API 解决动态生成 HTML 元素在页面刷新后消失的问题。通过在用户提交表单时将数据存储到 localStorage，并在页面加载时从 localStorage 中检索并重新渲染这些数据，可以确保用户创建的内容在浏览器会话之间持久存在，极大地提升了用户体验。

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

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

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

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

<!-- 原始 HTML 结构示例 -->
<div id="party">
  <h1>发布信息</h1>
  <div>
    <label for="nom">派对名称：</label>
    &lt;input type=&quot;text&quot; id=&quot;nom&quot; name=&quot;nom&quot; placeholder=&quot;派对名称&quot; required&gt;
  </div>
  <!-- 其他表单字段省略 -->
  <button type="button">发布</button>
</div>
<!-- 动态生成的表格将添加到这里或 body 底部 -->
// 原始 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 实现动态表格持久化的完整代码示例。

3.1 HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态表格持久化示例</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    #party div { margin-bottom: 10px; }
    label { display: inline-block; width: 150px; }
    input { padding: 5px; width: 200px; }
    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; }
  </style>
</head>
<body>

  <div id="party">
    <h1>发布派对信息</h1>
    <div>
      <label for="nom">派对名称：</label>
      &lt;input type=&quot;text&quot; id=&quot;nom&quot; name=&quot;nom&quot; placeholder=&quot;例如：夏日泳池派对&quot; required&gt;
    </div>
    <div>
      <label for="adresse">派对地址：</label>
      &lt;input type=&quot;text&quot; id=&quot;adresse&quot; name=&quot;adresse&quot; placeholder=&quot;例如：海滨大道123号&quot; required&gt;
    </div>
    <div>
      <label for="capacite">容纳人数：</label>
      &lt;input type=&quot;text&quot; id=&quot;capacite&quot; name=&quot;capacite&quot; placeholder=&quot;例如：50&quot; required&gt;
    </div>
    <div>
      <label for="phone">联系电话 (选填)：</label>
      &lt;input type=&quot;text&quot; id=&quot;phone&quot; name=&quot;phone&quot; placeholder=&quot;例如：138XXXXXXXX&quot;&gt;
    </div>
    <div>
      <label for="heure1">开始时间：</label>
      &lt;input type=&quot;text&quot; id=&quot;heure1&quot; name=&quot;heure1&quot; placeholder=&quot;例如：10:00&quot; required&gt;
    </div>
    <div>
      <label for="heure2">结束时间：</label>
      &lt;input type=&quot;text&quot; id=&quot;heure2&quot; name=&quot;heure2&quot; placeholder=&quot;例如：20:00&quot; required&gt;
    </div>
    <button type="button" id="publishButton">发布</button>
  </div>

  <div id="table-container">
    <!-- 动态生成的表格将插入到这里 -->
  </div>

  <script src="script.js"></script>
  <!-- 如果使用 jQuery，需要引入 jQuery 库 -->
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
</body>
</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 函数

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

元素并添加表头 ( 元素，并将其 innerHTML 设置为存储的片段，然后添加到表格中。

4.3 publishButton 事件监听器

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

  1. event.preventDefault()：阻止按钮的默认行为（例如，如果按钮在一个
    标签内，它可能会导致页面刷新）。
  2. 获取所有表单字段的值。
  3. 进行基本的输入验证。
  4. 调用 ensureTableStructure 确保表格存在。
  5. 创建一个新的
元素，并用表单数据填充 元素的 innerHTML。这对于简单的表格行来说是有效的。对于更复杂的数据结构（例如包含事件监听器或复杂对象），建议使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串进行存储，并在读取时使用 JSON.parse() 转换回对象。

// 存储对象示例
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 或将数据发送到后端服务器进行持久化。

以上就是《localStorage保存数据方法详解》的详细内容，更多关于的资料请关注golang学习网公众号！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
    立即学习 543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
    立即学习 516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
    立即学习 500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    立即学习 487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
    立即学习 485次学习
)。这保证了无论是在页面加载时恢复数据，还是在用户首次提交数据时，表格结构都能正确地被创建。

4.2 loadAndRenderTableData 函数

在 DOMContentLoaded 事件（即页面 DOM 完全加载后）中调用此函数。它会：

  1. 从 localStorage 中获取存储的字符串。
  2. 如果存在数据，则调用 ensureTableStructure 来确保表格和表头已准备好。
  3. 使用自定义分隔符 '¬' 将存储的字符串拆分成单个表格行的 HTML 内容。
  4. 遍历这些 HTML 片段，为每个片段创建一个新的
元素。
  • 将新行添加到 DOM 中的表格。
  • 持久化操作：
    • 获取 localStorage 中当前存储的所有行数据。如果为空，则初始化为空字符串。
    • 将新行的 innerHTML 附加到现有数据中，并使用 '¬' 作为分隔符。这个分隔符的选择很重要，它应该是一个不太可能出现在实际 HTML 内容中的字符，以避免解析错误。
    • 将更新后的字符串重新存回 localStorage。
  • 清空表单字段，方便用户继续输入。

    • 4.4 数据序列化与反序列化

    在这个例子中，我们直接存储了