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

Question

I am stuck. I am using localStorage for the first time as a beginner in JS, but I am failing to get the saved data and display it on the front end. When I console.log I can see the data in the console, but how to get it not the page to display. I am really looking for basics, whether I should create a function for both (there are two) and loop through it.

I am really out of my depth and would appreciate any tips.

This is my JS which I have been working on bit by bit:

//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"));

}

Answer 1

You have done it right in here:

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

Because the variable displayedNumbers is defined outside the for loop, so it is visible outside it.

In order to get the sum value, you have to define a variable outside the for loop aswell, and then increment it on your reduce function:

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;  

}

Answer 2

I've updated your displayArray function below:

//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;  

}

The problem with your original code is that, your sum variable is inside the for loop which concatenates the numbers into a string. Also, I've made use of the join function of array instead of looping through it.

Although I'm not sure if this is where your problem is based on what you said

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

Because sum (in the above code) is not derived from the localStorage at all.