Javascript 如何从本地存储中获取数组并将其显示在HTML中

我被卡住了。作为JS的初学者，我第一次使用localStorage，但我无法获取保存的数据并将其显示在前端。当I console.log时，我可以在控制台中看到数据，但是如何获取数据而不是显示页面。我真的在寻找基础知识，我是否应该为两者创建一个函数（有两个）并循环使用它

我真的是超出了我的能力范围，如果有任何建议，我将不胜感激

这是我的JS，我一直在一点一点地工作：

//Array to hold statistics of number of pages read per sitting  over a period of time
let myArray = [];

//Function to calculate number of pages read
let calculate = () => {
  var start = document.getElementById("number1").value;
  var end = document.getElementById("number2").value;
  //document.getElementById("number1").value = ""; // make START empty
  //document.getElementById("number2").value = ""; //make END empty
  let totalNumber = end - start; 

  myArray.push(totalNumber); //Push total number into array
  //Store myArray in localStorage  and retrieve
  localStorage.setItem("items", JSON.stringify(myArray));
  localStorage.getItem("items");

  //How do I display this in array?



  document.getElementById("congrats").textContent =
    "Congrats you just revised " + totalNumber + "  pages!";//display message
  document.getElementById("rightpane1").textContent = myArray;//push array into HTML

  displayArray();//Call display array


};

//Function to display myARRAY broken down to a new line
const displayArray = ()=> {
  let displayedNumbers='';
  for (i = 0; i < myArray.length; i++){

       displayedNumbers += myArray[i] + "\n";
       //Calculate myArray and give sum total of numbers
       var sum = myArray.reduce(function (accumulator, currentValue) {
        return accumulator + currentValue;
      }, 0);

      //Store sum in localStorage and retrieve
       localStorage.setItem("items2", JSON.stringify(sum));
       localStorage.getItem("items2");
       //How do I display this in SUM
  };  
  document.getElementById("rightpane1").textContent = displayedNumbers;//Append myArray into HTML

  //Add sum of array and display it in HTML
  document.getElementById("rightpane2").textContent = 'Total ' + sum;  

}

//Get myArray from local storage

const displayArrayData = () => (){
   let myArrayObject = JSON.parse(localStorage.getItem("items"));
}

//get SUM from local storange
const displaySumData = () => {
   let mySumObject = JSON.parse(localStorage.getItem("items2"));

}

//用于保存一段时间内每次坐席读取的页数统计信息的数组
让myArray=[]；
//函数计算读取的页数
让我们计算=（）=>{
var start=document.getElementById（“number1”）.value；
var end=document.getElementById（“number2”）.value；
//document.getElementById（“number1”）.value=”“；//将START设置为空
//document.getElementById（“number2”）.value=”“；//将END设为空
让totalNumber=结束-开始；
myArray.push（totalNumber）；//将总数推入数组
//将myArray存储在localStorage中并检索
setItem（“items”，JSON.stringify（myArray））；
localStorage.getItem（“items”）；
//我如何在数组中显示它？
document.getElementById（“恭喜”）.textContent=
“恭喜你刚刚修改了”+totalNumber+“页面！”；//显示消息
document.getElementById（“rightpane1”）.textContent=myArray；//将数组推入HTML
displayArray（）；//调用显示数组
};
//函数以显示分解为新行的myARRAY
常量displayArray=（）=>{
让DisplayedNumber=''；
对于（i=0；i（）{
让myArrayObject=JSON.parse（localStorage.getItem（“items”）；
}
//从本地存储区域获取和
const displaySumData=（）=>{
让mySumObject=JSON.parse（localStorage.getItem（“items2”）；
}

您已经在这里完成了：

document.getElementById("rightpane1").textContent = displayedNumbers;

因为变量

displayedNumbers

是在

for

循环的外部定义的，所以它在循环的外部可见

为了获得求和值，您还必须在for循环之外定义一个变量，然后在reduce函数中增加该变量：

const displayArray = ()=> {
  let displayedNumbers='';
  var sum = 0;
  for (i = 0; i < myArray.length; i++){

       displayedNumbers += myArray[i] + "\n";
       //Calculate myArray and give sum total of numbers
       sum += myArray.reduce(function (accumulator, currentValue) {
         return accumulator + currentValue;
       }, 0);

      //Store sum in localStorage and retrieve
       localStorage.setItem("items2", JSON.stringify(sum));
       localStorage.getItem("items2");
       //How do I display this in SUM
  };  
  document.getElementById("rightpane1").textContent = displayedNumbers;

  //Add sum of array and display it in HTML
  document.getElementById("rightpane2").textContent = 'Total ' + sum;  

}

constdisplayArray=（）=>{
让DisplayedNumber=''；
var总和=0；
对于（i=0；i

我已经更新了下面的

displayArray

功能：

//Function to display myARRAY broken down to a new line
const displayArray = ()=> {
  let displayedNumbers=myArray.join('');

  //Calculate myArray and give sum total of numbers
  var sum = myArray.reduce(function (accumulator, currentValue) {
     return accumulator + currentValue;
  }, 0);
  //Store sum in localStorage and retrieve
  localStorage.setItem("items2", JSON.stringify(sum));

  document.getElementById("rightpane1").textContent = displayedNumbers;//Append myArray into HTML

  //Add sum of array and display it in HTML
  document.getElementById("rightpane2").textContent = 'Total ' + sum;  

}

原始代码的问题在于，

sum

变量位于

for

循环中，该循环将数字连接成字符串。此外，我还使用了array函数，而不是循环遍历它

虽然我不确定你的问题是否基于你所说的

...but I am failing to get the saved data and display it on the front end.

---

因为

sum

（在上面的代码中）根本不是从

localStorage

派生的。

document.getElementById（“rightpane1”）.textContent=myArray；我认为您应该在这里使用foreach循环遍历所有元素，然后显示它们。为什么要在for循环中计算总和？另外，对于

displayedNumbers

：您可以使用

myArray来代替循环遍历数组。join（'\n'）

谢谢Paulo，明天将再次查看，但是我真正想要的是在下次使用打开app时将本地存储的结果显示在HTML中，您所要做的就是获取item2的值，并以您已经在做的方式显示它：document.getElementById（“rightpane2”）.textContent=JSON.parse（localStorage.getItem（“items2”）；