JavaScript动态创建DOM元素，页面刷新后，元素就没了，如何永久保存动态创建的元素？

Question

let ShowFolder= document.createElement('p');
div.appendChild(folder);

Answer 1

都说是“动态”了，永久保存那就是“静态”了呀，还是说题主想表达的是页面缓存？

当然，要实现是有办法的，比如把动态创建节点的 数据 用 localStorage、sessionStorage 、indexedDB 等手段在客户端缓存下来，初始化加载就能实现这种效果

再比如把需要生成的 dom 以 数据结构 的形式描述出来，再缓存这个数据结构

不大推荐的方案是把生成 dom 的语句作为 字符串缓存 ，执行时使用 eval ，不大安全就是了，但是只要最终不涉及上传，就可以蛮用；但是一旦涉及上传就别用了，防止 xss

方案一

缓存数据间接实现缓存 dom

// 这是动态渲染所依赖的数据，它被缓存了，也就意味着 dom 被缓存了
const datas = [
    {
        name: 'xxx',
        price: 1024
    },
    {
        name: 'xxx2',
        price: 2048
    },
]

const cache = sessionStorage.getItem('data')

// 动态渲染函数（具体内容省略）
function render(data) {}

if (cache !== null) {
    // 已经有数据了，就直接调用
    render(datas)
} else sessionStorage.setItem('data', datas)

方案二：

缓存 dom 节点数据结构

const doms = [
    {
        name: 'p',
        content: 'p标签的内容'
    },
    {
        name: 'div',
        content: 'div标签的内容'
    },
]

function renderDom(data) {
    for (let d of doms) {
      const dom = document.createElement(d.name)
      dom.innerHTML = d.content
      console.log(dom);
    }
}

// 缓存数据的方式和方案一大同小异

方案三（不推荐）：

将创建 dom 的语句当做字符串缓存，如果数据涉及上传，请考虑前两种方案，这种可能导致 xss 攻击

const doms = [
  `document.createElement('p')`,
  `document.createElement('div')`,
]

function renderStr(data) {
    for (let d of doms) {
      const dom = eval(d);
      console.log(dom);
    }
}

// 要缓存也是缓存 doms