Question

我在使用javascript

在localstorage中本地保存标记后恢复标记时遇到问题

这是我在localstorage中保存div标签的代码

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

这是我的代码从localstorage恢复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函数那么我该怎样做才能完全恢复标签，包括提前完成所有操作

Answer 1

您无法在本地存储中存储DOM引用。本地存储只存储字符串，而不存储DOM引用。

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

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

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

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

如何使用javascript？</div>在localstorage中完全恢复已保存的<div>标记

1 个答案: