Set localstorage for array of elements in javascript

Question

I need to set an array of objects values to localstorage using vanilla JavaScript.

I have tried looping through the array and getting each index then setting each index it doesn't seem to work. However if i single reference each element it works, which is strange...

const theme_cache = [document.getElementById('panel').style.background,document.getElementsByClassName('icon-bar')[0].style.color]

     const saved_theme_cache = JSON.parse(localStorage.getItem('cached-elements'));

    element.onchange = function(){
         localStorage.setItem('cached-elements', JSON.stringify(theme_cache));
    }

localStorage is a key/value pair and accepts only strings as value parameters. When passed something else, it will call it's toString representation. You should use JSON.stringify and JSON.parse to serialize/deserialize the value — Jonathan Hamel
– Jonathan Hamel, Commented May 3, 2019 at 18:52
You can use JSON.stringify() to store the array as a JSON string and JSON.parse() to restore the array of objects from the stored string. — Sarah Groß
– Sarah Groß, Commented May 3, 2019 at 18:52

Jonathan Hamel · Accepted Answer · 2019-05-03 18:54:18Z

3

localStorage is a key/value pair and accepts only strings as value parameters. When passed something else, it will call it's toString() representation. You should use JSON.stringify and JSON.parse to serialize/deserialize the value.

const listOfTests = [{test: "test"}]
localStorage.setItem("tests", JSON.stringify(listOfTests));

const listOfTestsFromLocalStorage = JSON.parse(localStorage.getItem("tests"))

answered May 3, 2019 at 18:54

Jonathan Hamel

1,38313 silver badges19 bronze badges

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

2 Comments

Jonathan Hamel Over a year ago

Please do not update your code in the original post, users need to know how relevant the answers are.

Jonathan Hamel Over a year ago

Your code will store the new values when element has changed. You need a handler to retrieve them. This code will only retrieve them on page load, once. We cannot help much as the snippet does not give enough scope of what you are trying to accomplish. You have to call getItem(x) everytime you want to retrieve the latest value of the localStorage. It will not update itself.

Collectives™ on Stack Overflow

Set localstorage for array of elements in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related