JavaScript: Trouble with Arrays in localStorage (using JSON Parse)

Question

New to JS. I am trying to store an array in localStorage by converting it to a string using JSON, and then parsing back into an array when I retrieve it from another page on my site. However, I'm not seeing what I expect in the console log after parsing back into an array.

I have not worked with JSON before, so maybe I am doing something wrong. I couldn't find that there was anything I needed to import on my script page to use JSON, but please let me know if I'm missing something.

Example code:

Page 1 HTML:

<div class="test">Some text.</div>
<div class="test">Some text.</div>
<div class="test">Some text.</div>

Page 1 JS:

var allDivs = document.querySelectorAll(".test");
console.log(allDivs);
  // Console Log Output: NodeList(3) [div.test, div.test, div.test]
localStorage.setItem("content", JSON.stringify(allDivs));

Page 2 JS:

var originalArray = JSON.parse(localStorage.getItem("content"));
console.log(originalArray);
  // Console Log Output: {0: {…}, 1: {…}, 2: {…}}

I was hoping that after retrieving on Page 2, the console log would bring back what I saw when I console-logged my original array on Page 1 (NodeList(3) [div.test, div.test, div.test]). Instead, I see that it is converting into some key-value pairs instead of the original array.

How can I return the original array on Page 2? I would like to be able to set up a function that loops through that array on Page 2, without having to manually copy all of the content on Page 1 to a hidden container on Page 2, as the Page 1 content changes daily.

If there is a better way overall that I should approach this, please let me know! I tried a few other things like fetch(url) and jQuery $.load as well, but was having trouble understanding how to make those options work with my code.

Ok after trying Array.from(allDivs) I'm closer, it does return an array, but the contents of the array are the key-value pairs again, like this: [Array(3)]0: (3) [{…}, {…}, {…}]. Perhaps I should rephrase - is there a way to bring back the original Node List? — Katie Reynolds
– Katie Reynolds, Commented Apr 25, 2021 at 18:19
Don't store HTML in localStorage. Store the data necessary to render the HTML, in localStorage, then rerender the HTML after pulling the data out. Trying to keep a whole DOM (with all its relationships) intact is a complex endeavor not worth the few milliseconds it takes to rerender the HTML. — Heretic Monkey
– Heretic Monkey, Commented Apr 25, 2021 at 18:36
Could you tell more about what you're trying to accomplish in a broader sense; the goal your solution is trying to solve? — Emiel Zuurbier
– Emiel Zuurbier, Commented Apr 25, 2021 at 18:40

score 1 · Accepted Answer · 2021-04-25 18:31:22Z

1

Nodelist is a collection of nodes which are objects with many properties: https://developer.mozilla.org/en-US/docs/Web/API/NodeList what you could do is:

const result = [];
for (const div of allDivs) {
    result.push(div.innerHTML);
    localStorage.setItem("content", JSON.stringify(result));
}

or alternatively:

const result = Array.from(allDivs).map((div) => div.innerHTML);
localStorage.setItem("content", JSON.stringify(result));

edited Apr 25, 2021 at 18:31

answered Apr 25, 2021 at 18:24

user15672038

Sign up to request clarification or add additional context in comments.

1 Comment

Katie Reynolds Over a year ago

Ah, this looks like what I will need! Thanks, let me try implementing this on my original code and see if I can get it working.

Collectives™ on Stack Overflow

JavaScript: Trouble with Arrays in localStorage (using JSON Parse)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related