如何将div列表保存至sessionStorage，页面重载后恢复展示对应内容

问题原因 #

• sessionStorage仅支持存储字符串类型数据，DOM对象无法被JSON.stringify正常序列化，直接存储DOM节点数组的操作无法生效
• 原有代码存在笔误：div.appendChile(p)应为div.appendChild(p)，会导致创建节点时报错

实现方案 #

你仅需存储已生成的div数量即可，页面重载时读取存储的数量，循环生成对应数量的节点就可以满足需求，完整修正代码如下：

const myStorage = window.sessionStorage;
// 初始化读取存储的div数量，无存储值时默认取0
let divCount = Number(myStorage.getItem('divCount')) || 0;

// 回车键事件处理
function captureEnterPress(event) {
    if (event.key === "Enter" || event.keyCode === 13) {
        event.preventDefault();
        createNewDiv();
    }
}

// 创建div节点
function createNewDiv() {
    const body = document.body;
    const div = document.createElement("div");
    const p = document.createElement("p");
    const labelText = document.createTextNode("Hello World!");
    p.appendChild(labelText);
    div.appendChild(p);
    body.appendChild(div);
    // 更新计数并同步到存储
    divCount++;
    myStorage.setItem('divCount', divCount);
}

window.onload = () => {
    // 页面加载时根据存储的计数生成对应数量的div
    for(let i = 0; i < divCount; i++) {
        createNewDiv();
    }
    // 绑定键盘事件监听
    document.documentElement.addEventListener("keyup", captureEnterPress);
}

拓展说明 #

如果后续需要保存每个div的自定义内容而非固定文本，可以将所有div的内容存入数组，序列化后存储到sessionStorage，页面加载时读取数组内容，再逐个生成对应DOM节点即可，始终避免直接存储DOM对象。

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