如何将点击事件创建的div元素存储到localStorage中？

localStorage 仅支持存储字符串类型数据，无法直接存储原生DOM节点对象。DOM节点本身包含大量不可序列化的循环引用、浏览器内部状态，强行存储会丢失全部有效信息，正确的实现思路是提取div的可复用属性序列化成字符串存储，页面加载时根据存储的信息重建div节点。

具体实现代码 #

你只需要在原有逻辑基础上补充序列化存储、页面初始化重建两个部分的逻辑即可，参考代码如下：

// 绑定按钮点击事件（原有逻辑保留）
b.addEventListener('click', addDiv);
// 页面加载完成后自动重建之前存储的div
window.addEventListener('DOMContentLoaded', renderSavedDivs);

function addDiv() {
  // 原有创建div逻辑
  const div = document.createElement('div');
  
  // 以下是你自定义div内容、样式的逻辑，按需修改
  div.textContent = '点击创建的内容块';
  div.className = 'created-block';
  div.style.cssText = 'padding: 12px; margin: 8px 0; border: 1px solid #e5e7eb; border-radius: 4px;';
  
  // 把创建好的div插入到页面指定容器中
  document.getElementById('divContainer').appendChild(div);

  // 开始存储逻辑
  // 先读取本地已经存过的div列表，没有数据则初始化为空数组
  const savedDivList = JSON.parse(localStorage.getItem('pageDivs') || '[]');
  // 把当前新div的可序列化信息存入列表
  savedDivList.push({
    content: div.innerHTML,
    className: div.className,
    inlineStyle: div.style.cssText
    // 如果有id、自定义dataset属性等需要保留，在这里加对应字段即可
  });
  // 转成JSON字符串存回localStorage
  localStorage.setItem('pageDivs', JSON.stringify(savedDivList));
}

// 页面加载时根据存储的数据重建div
function renderSavedDivs() {
  const savedDivList = JSON.parse(localStorage.getItem('pageDivs') || '[]');
  const container = document.getElementById('divContainer');
  savedDivList.forEach(divConfig => {
    const div = document.createElement('div');
    div.innerHTML = divConfig.content;
    div.className = divConfig.className;
    div.style.cssText = divConfig.inlineStyle;
    container.appendChild(div);
  });
}

注意事项 #

• 绝对不要直接把DOM节点对象传入localStorage.setItem，也不要尝试直接对DOM节点做JSON.stringify，会因为循环引用抛出错误，最终也无法恢复节点。
• 如果你的div包含多层子节点，可以递归提取每个节点的标签、属性、内容，按树结构存储后再递归重建即可，核心逻辑和上述单个div的存储逻辑一致。
• 如果后续需要支持删除、修改已创建的div，只需要在操作DOM后同步更新localStorage中对应的数据条目即可。

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