如何将 localforage 迭代显示或映射到 html 元素 <p>

Posted 2023-05-07

【中文标题】如何将 localforage 迭代显示或映射到 html 元素 <p>

【英文标题】：How to display or map localforage iterations to html element <p>

【发布时间】：2022-01-19 03:16:50

【问题描述】：

window.addEventListener("load", function () 

         document.getElementById("btnList").addEventListener("click", function () 
                    
             localforage.iterate((value, key, iterNum) => 
                 const lisst = [key, value]
                 document.getElementById('jstext').innerText = lisst
                 console.log(lisst) //log shows all of the added items
                                    //but lisst.length === 2
                                    //what am I missing?
         );
     

<button id="btnList">List Values</button>
<div id="jstext">
</div>

你好！我在这里尝试做的是显示已添加到我的 localforage 列表中的所有不同项目。当我登录到控制台时，所有已添加的项目都显示在控制台中，但是当我尝试在我的

元素甚至

元素中显示整个列表时，只有 ONE i> 项目（最后输入的项目）显示在元素中的网页上。 所以我的问题是：如何在我的 html 元素中显示每个项目，我哪里出了问题，我只向 localforage 显示最近输入的项目？

【参考方案1】：

您只看到最后一项的原因是您在每次迭代时都设置了元素的 innerText。

在您的情况下，您可能希望使用 addition assignment operator 将项目附加到元素的 innerText ：

document.getElementById("jstext").innerText += lisst

【讨论】：

啊，这很有道理@Reed D。谢谢你的解释。我试过你的 concat 方法，效果很好。与执行 emptyList.push(value, key) 相同。一切都背靠背，只有逗号分隔的列表看起来有点乱。我最终做的是创建一个 P 元素并使用字符串文字将 iterNum、key 和 value 插入到 innerHTML 中，然后将其附加到同一个 div #paragraph 元素，现在每个列表项都有自己的空间！感谢您的帮助，现在我要弄清楚如何删除单个列表项并更新列表....

拜托，你能把这个答案打对吗？