javascript - 如何使用 javascript 完全恢复本地存储中保存的 <div> 标签？

Question

我在使用 javascript 将标签保存在本地存储中后恢复标签时遇到问题

这是我在本地存储中保存div标签的代码

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

这是我从本地存储恢复 div 标签的代码

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 标签和标签内的元素，只是我丢失了我已经使用 .onclick 方法在 javascript 中设置的所有 onclick 函数 那么我该怎么做才能完全恢复标签，包括它的所有操作提前致谢

Answer 1

您不能在本地存储中存储 DOM 引用。本地存储仅存储字符串，不存储 DOM 引用。

您可以存储 DIV 的内容，但不能存储 DIV 对象本身。如果您想在恢复的对象上使用事件处理程序，则必须在创建恢复的对象后重新附加事件处理程序。

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

Cookie 或本地存储可以将状态从一个页面存储到下一个页面。

这里要记住的一件事是，DOM 对象仅在当前页面中的当前文档的生命周期内存在。加载新页面后，第一页的所有内容都会被销毁，并创建一个全新的文档和一组全新的 DOM 对象以及一个全新的 javascript 环境。