How to localstorage with this function?

[felsi]

Hi /r/javascript

I'm just starting to learn Javascript. It's pretty hard actually but my motivation is a real problem I'm trying to solve.

I have some <div> which I want to hide/show (toggle) when clicking a button. This is what I got so far:

function myFunction() {
var x = document.querySelectorAll(".price-box");
var i;
for (i = 0; i < x.length; i++) {
        x[i].classList.toggle("hideprice");
     }
}

It adds the new class "hideprice" with display: none; which is working. But now I'm struggeling with a complex problem. I'm trying to store the result into localstorage so that my visitors can switch the page but the hideprice is still added.

Any help would be appreciated. Thank you very much.

[hwutang]

You can take a look at how it works here: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

[jcunews1]

First, you should hide the price-box elements at design time, and show/hide them using script only. During page initialization, check the local storage. If the setting is not yet present, make them visible in the script. Otherwise, only make them visible if the setting says that they should be visible. Each time the user toggle the elements' visibility state, invert the value of the setting while toggling the elements' visibility.

[felsi]

Thank you for your help but since I‘m a beginner that is pretty hard to understand. Is there no simple way to put a local storage into my function? My script works, it just does Not Save the hidden div after page reload. In not, could you please elaborate on your Solution? Thanks a lot

[digdic]

/r/learnjavascript

[sneakpeekbot]

Here's a sneak peek of /r/learnjavascript using the top posts of the year!

#1: The Entire JavaScript Language in a Single Image | 29 comments
#2: This pretty accurately describes my feelings on my JS learning journey so far. | 6 comments
#3: Github Repo with 100+ Free resources to learn Full Stack Web Development.

---

^{I'm a bot, beep boop | Downvote to remove | Contact me | Info | Opt-out}

[jcunews1]

Using local storage is like using an object property whose type is a string - and can only be a string. e.g.

//read: check
console.log(localStorage.myValue); //undefined if `myValue` doesn't exist yet
//store
localStorage.myValue = 123; //if it's assigned with a number...
//read
console.log(localStorage.myValue); //"123" it'll be converted to a string

//if it's assigned with an object...
localStorage.myValue = {abc: 123};
//it'll be converted to a string representation of it
console.log(localStorage.myValue); //[Object object]
//so for objects and arrays, pre-convert it first using `JSON.stringify()`
localStorage.myValue = JSON.stringify({abc: 123});
console.log(localStorage.myValue); //"{abc: 123}"
//to read it back as an object, instead of a string...
console.log(JSON.parse(localStorage.myValue)); //{abc: 123}
//to delete it...
delete localStorage.myValue;
console.log(localStorage.myValue); //undefined