How to read back data from LocalStorage

Question

Once checkbox is active there are various <p> tags that get class "result". What I do with them is following:

function submit(){
  alert("in submit");
  var user_choice = document.getElementsByClassName("result");
  for (var i = 0; i < user_choice.length; i++){
    console.log(user_choice[i].innerHTML);
  }
  localStorage.setItem('storage',user_choice);
}

I hope this makes an HTMLcollection. After that, at submitted.html page (redirect there after pressing submit button) I wanna console.log all the items. So I write this:

window.onload = function() {
  if ( localStorage.getItem('storage')) {
    var got_user_choice = localStorage.getItem('storage');
    for (var i = 0; i < got_user_choice.length; i++){
      console.log(got_user_choice[i].innerHTML);
    }
 }
}

As long as it's a HTMLcollection (read array) I operate with it in terms of array. But what I get in console is just undefined. What's wrong with my code?

Possible duplicate of [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Heretic Monkey, Jan 28 '19 at 18:18

score 4 · Answer 1 · answered Jan 28 '19 at 18:15

Local storage can only contain strings, not DOM elements. You should make an array of all the elements, and convert that to JSON.

function submit(){
  alert("in submit");
  var user_choice = document.getElementsByClassName("result");
  var html = [];
  for (var i = 0; i < user_choice.length; i++){
    console.log(user_choice[i].innerHTML);
    html.push(user_choice[i].innerHTML);
  }
  localStorage.setItem('storage',JSON.stringify(html));
}

How to read back data from LocalStorage

1 Answers1