如何完全恢复已保存的<；部门>；使用javascript在localstorage中添加标记？

在使用javascript将标记保存到本地存储后，我在还原标记时遇到问题

下面是我在localstorage中保存div标记的代码

function saveqform() {
    var parent = document.getElementById("questions");
    console.log(parent);
    if (parent === undefined) {
        return;
    } else {
        localStorage.qtag = parent;
    }
}

function reloadqform() {
    console.log(localStorage.qid);
    console.log(localStorage.qtag);
    if (localStorage.qid === undefined || localStorage.qtag === undefined) {
        return;
    } else {
        $(document).ready(function() {
            var saved = localStorage.qtag;
            var parent = document.getElementById("element");
            parent.appendChild(saved);
        });
    }
}

下面是我从localstorage恢复div标记的代码

function saveqform() {
    var parent = document.getElementById("questions");
    console.log(parent);
    if (parent === undefined) {
        return;
    } else {
        localStorage.qtag = parent;
    }
}

function reloadqform() {
    console.log(localStorage.qid);
    console.log(localStorage.qtag);
    if (localStorage.qid === undefined || localStorage.qtag === undefined) {
        return;
    } else {
        $(document).ready(function() {
            var saved = localStorage.qtag;
            var parent = document.getElementById("element");
            parent.appendChild(saved);
        });
    }
}

不幸的是，上面的代码在从本地存储恢复div标记时只输出未定义的内容，所以我采用了另一种方法，保存innerhtml而不是整个标记 下面是我保存内部html的代码

function saveqform() {
        var parent = document.getElementById("questions");
        console.log(parent);
        if (parent === undefined) {
            return;
        } else {
            localStorage.qtag = parent.innerHTML;
        }
    }

这是我恢复标签的代码

 function reloadqform() {
        console.log(localStorage.qid);
        console.log(localStorage.qtag);
        if (localStorage.qid === undefined || localStorage.qtag === undefined) {
            return;
        } else {
            $(document).ready(function() {
                var saved = localStorage.qtag;
                var parent = document.getElementById("element");
                parent.innerHTML=saved;
            });
        }
    }

实际上，这段代码完美地恢复了div标记和标记内的元素，只是我丢失了在javascript中使用.onclick方法设置的所有onclick函数

---

因此，我可以做些什么来简单地恢复标记，包括它的所有操作，这要提前感谢您不能在本地存储中存储DOM引用。本地存储仅存储字符串，而不存储DOM引用

可以存储DIV的内容，但不能存储DIV对象本身。如果要在还原对象上具有事件处理程序，则必须在创建还原对象后重新附加事件处理程序

在第二个示例中，如果要重写父级的所有innerHTML，则它将销毁并重新创建所有子元素，这将销毁所有可能已设置的事件处理程序。最好只保存/恢复一个特定元素的单个状态，从而在一个没有子元素的元素上设置

.innerHTML

。这样做，您就不会破坏任何事件处理程序

Cookie或本地存储可以将状态作为字符串存储在一页到下一页之间

---

这里需要记住的一点是，DOM对象只在当前页面中当前文档的生存期内存在。一旦加载了一个新页面，第一个页面中的所有内容都将被销毁，并创建了一个全新的文档、一组全新的DOM对象和一个全新的javascript环境。

这很奇怪，因为他说在div还原中它工作得很好。但只有事件消失了。那么它是在保存dom元素吗？@Dvir-是的，这是因为在他的第二个示例中，他存储了

.innerHTML

，这是一个字符串，然后他将该innerHTML分配给新页面。这应该行得通。必须在新文档中手动重新附加事件处理程序。您不能将事件处理程序保存在本地存储中。好的，还有什么选择呢？我的意思是，现在我没有办法，只能重新分配事件处理程序，有没有一种方法可以一步完成这项工作，我的意思是存储整个dom，还是继续我的任务approach@A'amerMohamed-您可能只需要存储节点的内容，而不是整个HTML块，但是我们需要在感兴趣的区域中查看HTML以及实际需要存储的内容（可能没有理由实际存储HTML，只存储某些对象的内容）。当您通过在

.innerHTML

中指定嵌入对象来“重建”HTML时，事件处理程序将丢失。如果只设置一个节点的

.innerHTML

，而该

.innerHTML

中没有子节点，则不会丢失上的事件处理程序。不，您不能存储整个DOM、事件处理程序和所有内容。为了满足您的好奇心，我正在做的是动态生成问题，如google forms style，但我需要在刷新页面时，用户不会丢失所有更改，这就是为什么我需要保存整个HTML块以简化操作，但我想现在，数据被保存，结构被重建，无论如何，谢谢