Can I use local storage in a <script>, or only plugins?

[thunderrainstorm]

Hi! I'm working on a custom theme from scratch, both to completely suit my site's needs, and to practice my relatively new full-stack coding skills (and very limited proboards coding skills). I had tried adding a button on site for an eventListener. I had hoped I could use it to swap out the site's background image when toggled using localStorage, but when I add the code and test it, nothing happens. The button is not toggled on refresh, and no localStorage seems to be saved when I check for localStorage memory. However I can see other things, like localStorage for my collapsable categories plugin, do save. Is this a case of me writing something wrong? Or is this a case of not being able to do it in <script> code and only as a plug in?

Thanks for any advice or suggestions!

[Kami]

For clarity, plugins are just javascript also, for the most part... it's just scripts and any accompanying HTML/CSS with a UI. I am not a plugin dev and I do not know much about JS but I can't imagine you can't do one but can do the other.

Chris or maybe Lynx ?

[thunderrainstorm]

Thanks for getting back to me Kami! Yeah, I know plugins are javascript, but I don't understand the whole theory of how they work opposed to just writing code in the theme editors ... which is why they are a study project for another time!

Thanks for tagging some people who might be able to help. I'll link what code I have, in case it's useful.




<script>
           var checkbox = document.getElementById("nightmode-toggle");
           
if (localStorage.getItem("mode") == "dark") {
 nightmode();
} else {
 daymode();
}
           
checkbox.addEventListener("change", function() {
 if (checkbox.checked) {
   nightmode();
 } else {
   daymode();
 }
});
           
function nightmode() {
 document.body.classList.add("night-mode");
 checkbox.checked = true;
 localStorage.setItem("mode", "night");
}
           
function daymode() {
 document.body.classList.remove("night-mode");
 checkbox.checked = false;
 localStorage.setItem("mode", "day");
}
       </script>

<div class="toggle">
                    <input type="checkbox" id="nightmode-toggle" />
<label for="nightmode-toggle">
<svg version="1.1" class="sun" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve">

<rect x="152.994" y="58.921" transform="matrix(0.3827 0.9239 -0.9239 0.3827 168.6176 -118.5145)" width="40.001" height="16" />
<rect x="46.9" y="164.979" transform="matrix(0.9239 0.3827 -0.3827 0.9239 71.29 -12.4346)" width="40.001" height="16" />
<rect x="46.947" y="315.048" transform="matrix(0.9239 -0.3827 0.3827 0.9239 -118.531 50.2116)" width="40.001" height="16" />

<rect x="164.966" y="409.112" transform="matrix(-0.9238 -0.3828 0.3828 -0.9238 168.4872 891.7491)" width="16" height="39.999" />

<rect x="303.031" y="421.036" transform="matrix(-0.3827 -0.9239 0.9239 -0.3827 50.2758 891.6655)" width="40.001" height="16" />

<rect x="409.088" y="315.018" transform="matrix(-0.9239 -0.3827 0.3827 -0.9239 701.898 785.6559)" width="40.001" height="16" />

<rect x="409.054" y="165.011" transform="matrix(-0.9239 0.3827 -0.3827 -0.9239 891.6585 168.6574)" width="40.001" height="16" />
<rect x="315.001" y="46.895" transform="matrix(0.9238 0.3828 -0.3828 0.9238 50.212 -118.5529)" width="16" height="39.999" />
<path d="M248,88c-88.224,0-160,71.776-160,160s71.776,160,160,160s160-71.776,160-160S336.224,88,248,88z M248,392
c-79.4,0-144-64.6-144-144s64.6-144,144-144s144,64.6,144,144S327.4,392,248,392z" />
<rect x="240" width="16" height="72" />
<rect x="62.097" y="90.096" transform="matrix(0.7071 0.7071 -0.7071 0.7071 98.0963 -40.6334)" width="71.999" height="16" />
<rect y="240" width="72" height="16" />

<rect x="90.091" y="361.915" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -113.9157 748.643)" width="16" height="71.999" />
<rect x="240" y="424" width="16" height="72" />

<rect x="361.881" y="389.915" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 397.8562 960.6281)" width="71.999" height="16" />
<rect x="424" y="240" width="72" height="16" />
<rect x="389.911" y="62.091" transform="matrix(0.7071 0.7071 -0.7071 0.7071 185.9067 -252.6357)" width="16" height="71.999" />
</svg>
<svg version="1.1" class="moon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 49.739 49.739" style="enable-background:new 0 0 49.739 49.739;" xml:space="preserve">
<path d="M25.068,48.889c-9.173,0-18.017-5.06-22.396-13.804C-3.373,23.008,1.164,8.467,13.003,1.979l2.061-1.129l-0.615,2.268
      c-1.479,5.459-0.899,11.25,1.633,16.306c2.75,5.493,7.476,9.587,13.305,11.526c5.831,1.939,12.065,1.492,17.559-1.258v0
      c0.25-0.125,0.492-0.258,0.734-0.391l2.061-1.13l-0.585,2.252c-1.863,6.873-6.577,12.639-12.933,15.822
      C32.639,48.039,28.825,48.888,25.068,48.889z M12.002,4.936c-9.413,6.428-12.756,18.837-7.54,29.253
      c5.678,11.34,19.522,15.945,30.864,10.268c5.154-2.582,9.136-7.012,11.181-12.357c-5.632,2.427-11.882,2.702-17.752,0.748
      c-6.337-2.108-11.473-6.557-14.463-12.528C11.899,15.541,11.11,10.16,12.002,4.936z" />
</svg>
</label>
                   </div>

:root{
   --wallpaper: url(https://cdn.discordapp.com/attachments/568446146478080001/1163635673086042132/DotNewSkin.jpg?ex=65404b2b&is=652dd62b&hm=ba038ccc99f1172c54fdc704e9b1afab01d7e445eab179244eb51cfd6c7fbdd3&);
}
.night-mode{
--wallpaper: url(https://images.unsplash.com/photo-1505312926838-645f295a20e1?auto=format&fit=crop&q=80&w=3087&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}

.toggle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
   margin-bottom: 2%;
}

.toggle {
label {
width: 90%;
height: 40px;
position: relative;
display: block;
background: @box-background-color;
border-radius: 200px;
box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
inset 0px -5px 15px rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: 0.3s;
&:after {
content: "";
width: 45%;
height: 40px;
position: absolute;
top: 0px;
left: 0px;
background: linear-gradient(180deg, @link-color, @header-background-color);
border-radius: 180px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
svg {
position: absolute;
width: 25px;
top: 8px;
z-index: 100;
&.sun {
left: 15%;
fill: @box-background-color;
transition: 0.3s;
}
&.moon {
right: 15%;
fill: @sidebar-link-color;
transition: 0.3s;
}
}
}

input {
width: 0;
height: 0;
visibility: hidden;
&:checked + label {
background: @box-sub-element-color;
&:after {
left: 100%;
transform: translateX(-100%);
background: linear-gradient(180deg, @header-background-color, @sidebar-link-color);
}
svg {
&.sun {
fill: @sidebar-link-color;
}
&.moon {
fill: @box-background-color;
}
}
+ .background {
background: #242424;
}
}
&:active:after {
width: 260px;
}
}
}

I think that's all the toggle related code ...

[Lynx]

Oct 29, 2023 20:23:49 GMT -8 thunderrainstorm said:

Thanks for getting back to me Kami! Yeah, I know plugins are javascript, but I don't understand the whole theory of how they work opposed to just writing code in the theme editors ... which is why they are a study project for another time!

Thanks for tagging some people who might be able to help. I'll link what code I have, in case it's useful.




<script>
           var checkbox = document.getElementById("nightmode-toggle");
           
if (localStorage.getItem("mode") == "dark") { <-- looking for dark
 nightmode();
} else {
 daymode();
}
           
checkbox.addEventListener("change", function() {
 if (checkbox.checked) {
   nightmode();
 } else {
   daymode();
 }
});
           
function nightmode() {
 document.body.classList.add("night-mode");
 checkbox.checked = true;
 localStorage.setItem("mode", "night"); <-- setting to night
}
           
function daymode() {
 document.body.classList.remove("night-mode");
 checkbox.checked = false;
 localStorage.setItem("mode", "day"); <-- setting to day
}
       </script>

I'm about to go to bed, but what caught my eye was that you're doing a getItem and matching against "dark", while neither of your setItem sets anything to "dark" - one sets to "day" and the other to "night" ... it's never going to find a match for "dark". You'll need to do a getItem("mode") == "night" to get a match, or change your setItem to setItem("mode","dark") for your current getItem - DON'T do both changes, just one or the other. Perhaps Chris can see something else I haven't. I haven't looked at any of the other code, but I did notice what I pointed out.

[thunderrainstorm]

Oct 29, 2023 20:43:41 GMT -8 Lynx said:

Oct 29, 2023 20:23:49 GMT -8 thunderrainstorm said:

Thanks for getting back to me Kami! Yeah, I know plugins are javascript, but I don't understand the whole theory of how they work opposed to just writing code in the theme editors ... which is why they are a study project for another time!

Thanks for tagging some people who might be able to help. I'll link what code I have, in case it's useful.




<script>
           var checkbox = document.getElementById("nightmode-toggle");
           
if (localStorage.getItem("mode") == "dark") { <-- looking for dark
 nightmode();
} else {
 daymode();
}
           
checkbox.addEventListener("change", function() {
 if (checkbox.checked) {
   nightmode();
 } else {
   daymode();
 }
});
           
function nightmode() {
 document.body.classList.add("night-mode");
 checkbox.checked = true;
 localStorage.setItem("mode", "night"); <-- setting to night
}
           
function daymode() {
 document.body.classList.remove("night-mode");
 checkbox.checked = false;
 localStorage.setItem("mode", "day"); <-- setting to day
}
       </script>

I'm about to go to bed, but what caught my eye was that you're doing a getItem and matching against "dark", while neither of your setItem sets anything to "dark" - one sets to "day" and the other to "night" ... it's never going to find a match for "dark". You'll need to do a getItem("mode") == "night" to get a match, or change your setItem to setItem("mode","dark") for your current getItem - DON'T do both changes, just one or the other. Perhaps Chris can see something else I haven't. I haven't looked at any of the other code, but I did notice what I pointed out.

Ugh, that's what I get for coding after a long day, I can't even keep my settings straight. Thank you for pointing that out! I have now corrected mode = night, but no success, unfortunately. But that will definitely prevent any future problems in troubleshooting, thank you!

[Chris]

A live demo would be a lot more informative. The comments in the posted code are not acceptable comments for vanilla javascript (e.g. <-- looking for dark is not a valid comment), but I am marginally confident you knew that and were merely adding them there for emphasis during posting (a live demo would have immediately revealed if those were in the actual code and causing errors).

I also noticed the use of nested CSS which although it is now supported on all the major browser platforms, except the discontinued Internet Explorer, is new enough to be encountered by older browsers that may not have been updated yet to be able to handle them. What browser and version are you using for your tests?

Absent a live demo I created a rudimentary one and the code worked as expected (once the comments were fixed) so the next step is to investigate the actual place where the code is running and not working as expected so other factors not present in this mini demo can be examined.



If the code is running without error then you can issue the following command in the browser console to see if there is a value being saved to local storage with the name of "mode": localStorage["mode"]

[Lynx]

I'll take the blame for the bad comments, Chris.

I did that post just before I went to bed and I added those in to point out the value that was being searched for and the values that were being set ... so that error was all on me (those weren't in the OP's 2nd post - I added them in my reply quote). That's what I get for responding when I'm about to visit sleepy-land.

[thunderrainstorm]

Oct 30, 2023 0:49:30 GMT -8 Chris said:

A live demo would be a lot more informative. The comments in the posted code are not acceptable comments for vanilla javascript (e.g. <-- looking for dark is not a valid comment), but I am marginally confident you knew that and were merely adding them there for emphasis during posting (a live demo would have immediately revealed if those were in the actual code and causing errors).

I also noticed the use of nested CSS which although it is now supported on all the major browser platforms, except the discontinued Internet Explorer, is new enough to be encountered by older browsers that may not have been updated yet to be able to handle them. What browser and version are you using for your tests?

Absent a live demo I created a rudimentary one and the code worked as expected (once the comments were fixed) so the next step is to investigate the actual place where the code is running and not working as expected so other factors not present in this mini demo can be examined.



If the code is running without error then you can issue the following command in the browser console to see if there is a value being saved to local storage with the name of "mode": localStorage["mode"]

Good morning Chris! I hadn't done a live demo in case it was a simple question (and to not disrupt any members or guests coming to the site seeing an only partially finished theme), but I guess in this case it can't really be avoided. I've since set this theme to "default" and it can be seen here (mode select toggle is in the bottom box of the left sidebar). I'm using my site with plugins instead of a testing site just in case that's causing any issues. I've since replaced the error Lynx spotted, but I don't think I've touched anything else since then. In case it's useful I've also added the theme's file.

So I've been testing on both desktop and mobile: Desktop is using Google Chrome Version 118.0.5993.117 as is up to date; Mobile is using Google Chrome Version 118.0.5993.92 and I believe is up to date. One of other staff members tested the button using firefox, but I'm not sure what version, but it didn't work for them either.




This is the error that appears in my console log (save google fonts). It's line 58 of the forum wrapper. I'm not entirely sure why it'd be causing an error, but maybe I've been looking at this code too long and I'm missing something obvious. 


LocalStorage only saves as undefined unfortunately.

Hopefully this is enough info to help narrow things down, and thanks so much for helping! This thing has been driving me nuts!

Attachments:

NEW THEME TEST.pbt (80.8 KB)

[Chris]

That error is most likely because of where you currently have the script (in the <head> and before the <body> tag even starts so any reference to body is not yet valid). You can either move it further down after the start of the <body> tag or delay the execution to wait on document ready.



*You should also be aware that if the script is running before the checkbox has been created, you will also get an error there. The browser parses from the top down, so a script should ensure that references to elements must already be parsed and created on the DOM before referencing them.

[thunderrainstorm]

Thank you so much! Moving the script to the bottom of the body completely solved the issue. Explaining that it works top down is very obvious in hindsight. Thank you for your troubleshooting!