1

使用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 标签时输出 undefined，所以我采用了另一种方法，通过保存 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 函数，所以我能做些什么来简单地恢复标签，包括它的所有动作，谢谢进步

4

1 回答 1

2

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

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

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

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

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

于 2013-10-10T21:53:44.193 回答