Add/remove a class in html using a js function

Question

I want to add a class to body in HTML using Javascript using a button that executes a function, then remove it using another button. But I want to save that class, until the other button is pressed, using LocalStorage. I can do that without LocalStorage

$$('body').addClass('Class here');

But how with LocalStorage?

jrbedard · Accepted Answer · 2016-10-15 12:41:26Z

1

By using Storage.setItem to save, then Storage.getItem to retrieve, like this:

var className = "theclass";

// Put the class name into storage
localStorage.setItem('className', className);

// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');

$('body').addClass(retrievedClassName);

answered Oct 15, 2016 at 12:41

jrbedard

3,7345 gold badges37 silver badges35 bronze badges

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

2 Comments

jakea james Over a year ago

What do I put into both functions?

jrbedard Over a year ago

setItem(key,value), getItem(key)

jedi · Accepted Answer · 2016-10-15 13:45:46Z

0

Here a working code with jquery:

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body class="">
        <div class="form-group">
            <button class="button">your button</button>
        </div>
        <script>
            var className = "theclass";

            jQuery('.button').on( 'click', function(){
                localStorage.setItem('className', className);
                jQuery('body').addClass(className);
            });

            // Retrieve the class name from storage
            var retrievedClassName = localStorage.getItem('className');
            jQuery('body').addClass(retrievedClassName);
        </script>
    </body>
</html>

And here without:

<html>
    <head></head>
    <body id="mybigbody" class="">
        <div class="form-group">
            <button id="button">your button</button>
        </div>
        <script>
            var className = "theclass";
            var body = document.getElementById("mybigbody");

            document.getElementById('button').onclick = function(e) {
                localStorage.setItem('className', className);
                body.setAttribute("class", className);
                e.stopPropagation();
            }

            // Retrieve the class name from storage
            var retrievedClassName = localStorage.getItem('className');
            if(retrievedClassName)
                body.setAttribute("class", retrievedClassName);
        </script>
    </body>
</html>

edited Oct 15, 2016 at 13:45

answered Oct 15, 2016 at 13:16

jedi

85912 silver badges33 bronze badges

18 Comments

jakea james Over a year ago

I am not using Jquery

jedi Over a year ago

@jekeajames So tell to me what is the $$? I thinked was a jquery typo.

jedi Over a year ago

Anyway the problem is the same. Inside your click event you can set the classname on your localstorage and on your body. And outside, at start you must retrive your class with getItem and the attach it on body.

jakea james Over a year ago

How, by adding getItem to the body? Sorry but I am new to JS

jedi Over a year ago

@jekeajames with var retrievedClassName = localStorage.getItem('className'); you can get from your local storage the class that you have saved with click in some precedent moment. So on retrievedClassName you have your class name. Now you must attach it to your body. Whit javascript without andy library you can do var body = document.getElementById("body"); body.setAttribute("class", retrievedClassName);

|

Collectives™ on Stack Overflow

Add/remove a class in html using a js function

2 Answers 2

2 Comments

18 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

18 Comments

Your Answer

Sign up or log in

Post as a guest

Related