Load localstorage saved class before everything else

Question

I've been searching all over and still no solution to this. I have a vertical menu and by default is expanded. When i click on the toogle button as in the image below, it adds the verical-mini class to the body tag, and also is saving it inside localstorage, which represents the collapsed state.

Now the issue i have is that on poor internet connections screens, or chrome and edge browsers on page load/refresh , it displays first the default expanded class and only after document has been loaded , if the mini class exists in localstorage , it adds the vertical-mini class to the body tag.

So is it possible to load the saved class from localstorage before anything else, or at least faster so we can't see the default expanded state first ?

I tried also placing the jquery inside the header but still has the same delay.

Someone suggested me a jquery preloader but this is not an alternative as some of my pages have a lot of content and it would take some time until the document will be loaded.

jQuery code:

$(document).ready(function() {

    $('.vertical-menu-toogle').click(function (event) {
        event.preventDefault(); 

        $('body').toggleClass('vertical-mini');

        if($('body').hasClass('vertical-mini')){
            localStorage.setItem('savedmini', 'vertical-mini');
        }
        else{
            localStorage.removeItem('savedmini');
        }
    });

    var savedmini = localStorage.getItem('savedmini');  
    if(savedmini !== ''){      
        $('body').addClass(savedmini);
    }
    else {
        $('body').removeClass(savedmini);
    }
});

CSS:

.vertical-menu {
   height: 100%;
   width: 250px;
} 

.vertical-mini .vertical-menu {
   width: 80px;
}

Use pure java-script for this not jquery, as jquery takes time to load and use that pure java-script code in head tag — Rakesh Soni, May 25 '17 at 10:28
if you can't edit the html and put the class directly there. use plain javascript — Mihai T, May 25 '17 at 10:34
great advice, but i have no idea how my posted jquery code will look as pure js. Any help will be much appreciated. — COS, May 25 '17 at 10:35
@MihaiT placing the class directly is not a solution as the class it will be added/removed every time i hit the toogle menu button. — COS, May 25 '17 at 10:38
You will need to look at the javascript `classList` API. Specifically `.classList.add`, `.classList.remove`, `.classList.toggle` and `.classList.contains`. — Rounin, May 25 '17 at 10:48

score 0 · Answer 1 · answered May 25 '17 at 13:19

Use the following code

Basic jquery code can be put near end tag of body (after loading jquery). This part will not effect speed of initial functioning

$(document).ready(function() {

    $('.vertical-menu-toogle').click(function (event) {
        event.preventDefault(); 

        $('body').toggleClass('vertical-mini');

        if($('body').hasClass('vertical-mini')){
            localStorage.setItem('savedmini', 'vertical-mini');
        }
        else{
            localStorage.removeItem('savedmini');
        }
    });
});

This part should be pure javascript and should be placed in the head tag before loading any js or css file

    var savedmini = localStorage.getItem('savedmini');  
    if(savedmini !== ''){      
        document.getElementsByTagName('body')[0].classList.add(savedmini);
    } else {
        document.getElementsByTagName('body')[0].classList.remove(savedmini);
    }

Your second part of the code is not working, the class on body tag is not added on page refresh. — COS, May 25 '17 at 13:37
check for the local storage see if you entry is saved to it or not — Rakesh Soni, May 25 '17 at 13:41
yes is saved on localstorage but it only saves it to. It doesn't removes it from localstorage when i click the button again...and the class vertical-mini is not added to body tag on page refresh. — COS, May 25 '17 at 13:45

score 0 · Answer 2 · answered Nov 25 '17 at 00:23

The solution is document.write, inspired from here

combined with localStorage. Once you have the localStorage set:

in the <head> set a variable, looking for your localStorage value and create your menu tag:

<script>var menu = localStorage.savedmini ? '<menu class="vertical-mini">' : '<menu>';</script>

If the localStorage value exists, your variable will have the menu tag with the vertical-mini class.

in the <body>, above the ".vertical-menu" replace the <menu> with:
```
<script>document.write(menu);</script> 
```

This way the html is built with the variable and you don't have to wait for (document).ready(). All without updates, changes, preloads or flicker.

We assume that the localStorage value exists, so your html will look something like this:

<menu class="vertical-mini"><ul class="vertical-menu">...

... or whatever tag you use for the menu.

Tested on localhost. Works fine.

Load localstorage saved class before everything else

2 Answers2