How to retrive the data from the localStorage and push it into innerHTML?

Question

I am trying to retrieve the array from the local storage and display it in innerHTMl. But every time I do a refresh there is nothing in my innerHTML. Although the array is visible in the browser LocalStorage.

document.getElementById("submit").addEventListener("click", arrpush);
var arr = JSON.parse(localStorage.getItem(arr)) || [];

function arrpush(){
    arr.push(document.getElementById('text').value);
    document.getElementById("items").innerHTML = ""; 
    localStorage.arr = JSON.stringify(arr);
    display();
}
function display(){
    document.getElementById("items").innerHTML = "";
    for(i=0;i<arr.length;i++){
    document.getElementById("items").innerHTML += `<li>${arr[i]}</li>`;   
    }   
}

Your display function is only called in your arrpush function. And arrpush is called on click the submit button — alexP, Aug 22 '19 at 11:37
https://stackoverflow.com/questions/3357553/how-do-i-store-an-array-in-localstorage I guess you have problem with array, that has to be string — clean code, Aug 22 '19 at 11:39

score 0 · Accepted Answer · answered Aug 22 '19 at 11:52

In this line you're trying to get arr not "arr". "arr" is the name of your localstorage element. arr is your array for the value of "arr".

var arr = JSON.parse(localStorage.getItem(arr)) || []; //getItem("arr")

Further you'll have to call your display function after load

window.onload = function(){
  display();
}

How to retrive the data from the localStorage and push it into innerHTML?

1 Answers1