无法从localStorage检索动态生成的内容

Unable to retrieve dynamically generated content from localStorage

本文关键字：动态 localStorage 检索      更新时间：2023-09-26

我有一个id为"roster1"的HTML表，用户可以通过单击按钮添加表行，我正试图通过运行以下代码的"保存"按钮保存表状态：

function saveRoster () {
        localStorage.setItem('rosterPd1','');
        var roster = document.getElementById ('roster1');
        localStorage.setItem('rosterPd1', roster);
        }

如果我在"rosterPd1"中输入一些静态值，那么我可以毫无问题地使用写入localStorage的信息。然而，当我尝试使用上面的代码保存表时，我会返回[object HTMLTableElement]。。。这是正确的，但不是特别有用！

有人能为我指明正确的方向吗？我必须做些什么才能让localStorage保存表本身的内容？

您只能将字符串保存到存储，但对于您想要做的事情，innerHTML就足够了；

function saveRoster() {
    var roster = document.getElementById('roster1');
    if (!roster) return; // not found
    localStorage.setItem('rosterPd1', roster.innerHTML); // store innerHTML
}
function loadRoster() {
    var roster = document.getElementById('roster1');
    if (!roster) return; // not found
    roster.innerHTML = localStorage.getItem('rosterPd1'); // get+apply innerHTML
}

至于为什么会得到[object HTMLTableElement]，这就是当您在对<table>的JavaScript引用上调用toString时会发生的情况。

document.createElement('table').toString() // "[object HTMLTableElement]"
相关文章：