0

Can anyone help me to figure out what's actually wrong with my night mode JavaScript, When night mode is switch on and then i refresh my page or navigate to another page my night mode script switches back off, what might possibly be the issue with local storage or maybe it's just my code, honestly am a no-voice in JS and these is really getting my head to explode. since i have spend almost a month trying to hunt down the bug in my code. I also used the google chrome debug tool but it doesn't show where the bug is thought! I will really celebrate the person who helps me solve this issue for life time. Thank you !

<script>
    (function (window, document, undefined) {
        'use strict';
        if (!('localStorage' in window)) return;
        var nightMode = localStorage.getItem('gmtNightMode');
        if (nightMode) {
            document.documentElement.className += ' night-mode';
        }
    })(window, document);

    (function (window, document, undefined) {

        'use strict';

        // Feature test
        if (!('localStorage' in window)) return;

        // Get our newly insert toggle
        var nightMode = document.querySelector("#night-mode");
       

        // When clicked, toggle night mode on or off
        nightMode.addEventListener('click', function (event) {
            event.preventDefault();
            document.documentElement.classList.toggle('dark');
            if (document.documentElement.classList.contains('dark')) {
                localStorage.setItem('gmtNightMode', true);
                return;
            }
            localStorage.setItem('gmtNightMode');
        }, true);

    })(window, document);

    
</script>
Godda
  • 951
  • 1
  • 10
  • 26
  • Read the documentation on [`getItem`](//developer.mozilla.org/docs/Web/API/Storage/getItem) and [`setItem`](//developer.mozilla.org/docs/Web/API/Storage/getItem). You’re setting the storage value to either `"true"` or `"undefined"`. Both of these are strings which are truthy. You could store `"true"` and `"false"` instead, then use `JSON.parse` to get a boolean. – Sebastian Simon Oct 20 '21 at 12:04
  • The developer tools have a Storage debugger. You can see all values there. You can even explicitly set `var nightMode = localStorage.getItem('gmtNightMode');` in the console, then check what `nightMode` or `Boolean(nightMode)` are. The difference between `true` and `"true"` is color-coded, but you can always use `typeof` to determine the difference. – Sebastian Simon Oct 20 '21 at 12:12
  • Well am in the console now and i have tried your suggestion but the console didn't throw any error message every thing looks fine in there. But am having a problem now since some one went ahead and report this post as duplicate! i have check the solution he suggested with what he said was a duplicate but that solution doesn't solve my problem either because this has nothing to do with Boolean value ! so it peev me off someone to report this as a duplicate. Thank you anyway for your time! – Godda Oct 20 '21 at 13:33
  • Why do you think this has nothing to do with booleans? You are trying to store the boolean value `true` in local storage, which isn’t possible. Then you test the value with an `if` statement as if it was a boolean, which will fail. In order to store booleans in local storage, one option is to treat them as JSON: `localStorage.setItem("gmtNightMode", JSON.stringify(true));` to store it, `const nightMode = JSON.parse(localStorage.getItem("gmtNightMode"))` to retrieve it, and `if(nightMode)` to check it. This is exactly what the linked post explains. – Sebastian Simon Oct 20 '21 at 13:39
  • In the console, try out these expressions. The console is not only for errors. – Sebastian Simon Oct 20 '21 at 13:39

0 Answers0