Question

我正在尝试使用浏览器的localStorage存储array个对象。每个对象都有两个keys: name和quote。这些值来自form元素。当我重新加载browser时，我想map遍历数组并显示所有现有条目，并且当我从form元素中添加另一个条目时，也要显示该条目。

我正在使用JSON.parse和JSON.stringify将数据转换为string，然后再次返回到array。我正在使用document.createElement并将其附加到父元素，并将map中的每个对象值附加到特定元素。

当我array之后console.log的数组localStorage看起来像这样：

JSON.parse

当我重新加载浏览器并[ {name: "sda", quote: "asd"} {name: "fff", quote: "dsa"} {name: "", quote: ""} {name: "ferfe", quote: "fre"} {name: "yhtyh", quote: "grtg"} {name: "fdf", quote: "ds"} {name: "fdf", quote: "ds"} ] map时，它仅返回其中的最后一个元素，我不知道为什么。

array

如果我从form元素添加另一个条目，则效果很好。如果我重新加载浏览器，它将仅返回数组中的最后一项。当我单击const process = () => { const getList = JSON.parse(localStorage.getItem('key_name')).map(item => JSON.parse(item)); console.log(getList) const cite = document.createElement('cite'); const p = document.createElement('p'); document.getElementById('quote_list').appendChild(cite); document.getElementById('quote_list').appendChild(p); return( getList.map(item => { cite.innerHTML = item.quote; p.innerHTML = item.name; }) ) } const setData = () => { let getList = JSON.parse(localStorage.getItem('key_name')); const quote = document.quoteForm.quote.value; const name = document.quoteForm.name.value; const data = {name: name, quote: quote}; const JsonData = JSON.stringify(data); localStorage.setItem('entry', JsonData); getList.push(JsonData); localStorage.setItem('key_name', JSON.stringify(getList)); process(); } window.addEventListener('onload', process());中的setData()时，将触发submit button。

Answer 1

问题是您在map()循环的每次迭代中覆盖2个元素的innerHTML，而只看到最后一个元素

我的猜测是，您需要为每个项目添加新元素

尝试更改：

 getList.map(item => {
    cite.innerHTML = item.quote;
    p.innerHTML = item.name;
  })

收件人

const list = document.getElementById('quote_list');

getList.forEach(item => {
  const cite = document.createElement('cite');
  const p = document.createElement('p');
  cite.innerHTML = item.quote;
  p.innerHTML = item.name;
  list.appendChild(cite);
  list.appendChild(p)

})

注意：window.addEventListener('onload', process());应该是：

window.addEventListener('onload', process);
                                  // ^^ function reference not 
                                  // result of calling function

Answer 2

我认为您的代码有很多我不了解的地方：

const getList = JSON.parse(localStorage.getItem('key_name')).map(item => JSON.parse(item)); =>为什么double-JSON.parse（），如果您调用JSON解析，则将解析整个字符串或引发错误，JSON.parse不会让任何“剩菜剩饭”，所以JSON.parse()中的.map()，因此不需要整个.map()，因为您只需从.map()返回已解析的对象即可。
getList.map(item => {来呈现HTML可能没有按照您想要的方式执行，因为a）.map()从迭代中返回了一个新数组，但是您没有从此{{ 1}}调用，因此.map()将返回一个空数组，并没有真正的伤害，但是可以通过简单地使用process()进行改进。
forEach()和cite标签仅在每次调用p时创建一次，而不是为您从localStorage获取的报价列表中的每个项目创建一次，因此有效每次迭代都覆盖这两个元素的内容。
您为什么要设置process这个本地存储项似乎什么都没用？
您不需要使用localStorage.setItem('entry', JsonData);对新对象进行预字符串化，只需将其推入const JsonData = JSON.stringify(data);，然后在新对象数组上调用getList。
添加JSON.stringify()事件监听器时，该函数应通过引用传递

考虑到以上几点，如果使用以下经过修改的代码，您是否会看到行为的任何变化：

onload

.map（）仅返回数组中的最后一个对象

2 个答案: