Persisting CSS state using JavaScript's `window.cookie`

Question

I found some nifty JavaScript that inverts the colors on my website and I found a way to persist the state using localStorage.

Here is what the persisting logic looks like:

var isNight = localStorage['night'] || false;

if (isNight) {
   // $html is shorthand for my jQuery selected <html> tag
   $html.addClass('night');
else {
   $html.removeClass('night');
}
// further down I have code that adjusts `localStorage` everytime my button is clicked, inverting the colors

This works, however it looks very clunky as you can clearly see the CSS change every time you refresh the page.

Is there a way to make the CSS stay how it was last changed? What I'm thinking I have to do is manually edit the CSS file through JavaScript so that when the page loads it is already in there, but I'm not sure how to approach this.

CodingIntrigue · Accepted Answer · 2015-03-24 16:51:28Z

1

I assume this is all within a document.ready if you're using jQuery. To get this to render before the user sees anything, conditionally add the class inside the head element:

<html>
<head>
    <!-- Make sure the CSS class is added first -->
    <script>
        var isNight = localStorage["night"] || false;
        if(isNight) document.querySelector("html").className = "night";
    </script>
    <!-- Now load your stylesheet, jQuery & other scripts -->
    <link rel="stylesheet" type="text/css" href="yourstyles.css">
</head>
<body>

</body>
</html>

answered Mar 24, 2015 at 16:51

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

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

2 Comments

Zach Over a year ago

Yes it's all in a document.ready, and I am using jQuery. With this method I can still see a split-second delay between the original white background and the black background form the night class.

CodingIntrigue Over a year ago

@Zach That will be your browser background rather than the stylesheet background though. You'll get the same on any site.

Collectives™ on Stack Overflow

Persisting CSS state using JavaScript's `window.cookie`

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