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

Posted 2023-05-07

【中文标题】无法从 localStorage 检索动态生成的内容

【英文标题】：Unable to retrieve dynamically generated content from localStorage

【发布时间】：2013-07-11 19:51:27

【问题描述】：

我有一个 ID 为“roster1”的 html 表格，它允许用户通过单击按钮添加表格行，并且我试图通过运行以下代码的“保存”按钮保存表格状态：

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

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

有人可以指出我必须做些什么才能让 localStorage 保存表本身的内容吗？

【参考方案1】：

您只能将 Strings 保存到 Storage，但似乎对于您想要做的事情，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]，这就是当你在 javascript 对<table> 的引用上调用toString 时发生的情况。

document.createElement('table').toString() // "[object HTMLTableElement]"

【讨论】：

谢谢保罗。再次感谢您回答我为什么获得回报的奖励。抱歉 - 还没有足够的代表来投票，但你已经成功了！