Question

我是一个完全的新手，对于这个问题，我们事先表示歉意。使我的localStorage在div中显示的最佳方法是什么？假设我只保留".first"，并且想将所有密钥放入其中。

这是我想要的结果，但是我当然需要缩短它。

function myFunction() {
  document.querySelector('.first').innerHTML = (localStorage.key(i))
  document.querySelector('.second').innerHTML = localStorage.key(2)
  document.querySelector('.third').innerHTML = localStorage.key(3)
}

我正在尝试：

function myFunction() {
  document.querySelector('.first').innerHTML = (localStorage.key(i))
  for ( var i = 0; i < localStorage.length; ++i ) { 
    console.log(localStorage.key(i)+ 
    localStorage.getItem(localStorage.key(i))); 
  }
}

我在哪里将循环结果（很可能是多段文本）附加到div中？

Answer 1

有几种方法可以做到这一点首先，您不应该使用类来选择文档中的元素，因为DOM中的多个项目可以具有相同的类。改用ID。

您可以在每个循环中附加段落（非常耗时）。

function myFunction() {
  for ( var i = 0; i < localStorage.length; ++i ) { 
    const p = document.createElement("p");
    p.innerHtml = localStorage.getItem(localStorage.key(i));
    document.querySelector('.first').appendChild(p);
  }
}

您可以首先生成innerHTML字符串，然后将其附加到innerHTML

let localStorageItems = '';
function myFunction() {
  for ( var i = 0; i < localStorage.length; ++i ) { 
    localStorageItems += `<p>${localStorage.getItem(localStorage.key(i))}</p>`
  }
  document.querySelector('.first').innerHTML = localStorageItems;
}

Answer 2

您可以使用以下命令获取div的所有键

document.querySelector('#first').innerHTML = Object.keys(localStorage);

遍历本地存储并附加

2 个答案: