如何通过JavaScript动态添加内容至div并实现页面关闭后持久化？

当然可以做到！你提到的示例之所以刷新后内容消失，是因为它只在浏览器内存里操作了DOM元素，没有把数据持久化存储。要解决这个问题，我们可以利用浏览器提供的localStorage API——它能把数据存在用户本地设备上，即使关闭或刷新页面，数据也不会丢失。

下面是完整的实现方案，包含HTML和JavaScript代码：

1. HTML结构 #

先搭建基础的页面布局，包含输入框、添加按钮，以及用来展示内容的div：

<div id="contentContainer"></div>
<input type="text" id="inputText" placeholder="输入要添加的内容">
<button id="addBtn">添加内容</button>

2. JavaScript核心逻辑 #

我们需要完成三个关键操作：页面加载时恢复保存的内容、添加内容时同步更新DOM和本地存储、处理数据的序列化/反序列化（因为localStorage只能存储字符串）。

// 获取DOM元素
const contentContainer = document.getElementById('contentContainer');
const inputText = document.getElementById('inputText');
const addBtn = document.getElementById('addBtn');

// 页面加载时，从localStorage读取并渲染内容
function loadSavedContent() {
  // 从localStorage获取保存的内容，默认是空数组
  const savedContent = JSON.parse(localStorage.getItem('dynamicContent')) || [];
  // 把每条内容渲染到div里
  savedContent.forEach(item => {
    const p = document.createElement('p');
    p.textContent = item;
    contentContainer.appendChild(p);
  });
}

// 添加内容的函数
function addContent() {
  const text = inputText.value.trim();
  if (!text) return; // 空内容不添加

  // 1. 先把新内容添加到DOM
  const p = document.createElement('p');
  p.textContent = text;
  contentContainer.appendChild(p);

  // 2. 再更新localStorage里的数据
  const savedContent = JSON.parse(localStorage.getItem('dynamicContent')) || [];
  savedContent.push(text);
  localStorage.setItem('dynamicContent', JSON.stringify(savedContent));

  // 清空输入框
  inputText.value = '';
}

// 绑定事件
addBtn.addEventListener('click', addContent);
// 页面加载完成后执行恢复内容的函数
window.addEventListener('DOMContentLoaded', loadSavedContent);

关键说明 #

• localStorage特性：它属于同源存储，同一域名下的页面可以共享这些数据，存储上限一般是5MB左右，足够存储普通的文本内容。
• 数据序列化：因为localStorage只能存储字符串，所以我们用JSON.stringify()把数组转成字符串保存，读取时再用JSON.parse()转成数组。
• 替代方案：如果需要临时存储（比如仅当前会话有效，关闭页面就删除），可以用sessionStorage，用法和localStorage完全一样；如果要兼容非常老旧的浏览器，也可以用cookie，但cookie容量只有4KB，且会随每个HTTP请求发送，不太适合这种场景。

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