I've been working on creating a variable that stores its value across multiple pages using local storage. However, I've encountered an issue where the variable is not being saved, and there are no error messages to help diagnose the problem.
Here are the steps I've taken before reaching out for help: I watched YouTube tutorials on using local storage. I referenced this website . I also searched for solutions on Stack Overflow.
Unfortunately, I have been unable to find a solution to this issue.
Variables.js file
var mode = "light";
localStorage.setItem('mode', '');
function draw(){
if (document.body.style.backgroundColor == "#181818"){
mode = "dark";
console.log(mode);
}
if (document.body.style.backgroundColor == "#f2f112" || mode == "dark"){
mode = "dark";
alert("Error while attempting to change background to dark theme.")
}
}
index.html file
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<p><a href="settings.html">Settings</a></p>
<script type="text/javascript"></script>
<script src="variables.js"></script>
<script src="settings.html"></script>
<script>
modeselect = localStorage.getItem(mode);
if (modeselect == "light"){
console.log("light mode");
document.body.style.backgroundColor = "#f2f112";
}
if (modeselect == "dark"){
console.log("dark mode");
document.body.style.backgroundColor = "#f2f112";
}
</script>
</body>
</html>
settings.html file
<!DOCTYPE html>
<html>
<head>
<title>Settings</title>
</head>
<style>
.button1 {
background-color: #444444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
background-color: #ffffff;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
body {
background-color: rgb(156,158,158);
}
</style>
<body>
<form>
<input type="button" class="button1" value="Dark mode" onclick="darkmode()">
<input type="button" class="button2" value="Light mode" style ="color:black;" onclick="lightmode()">
</form>
<p><a href="index.html">Home</a></p>
<script src="variables.js"></script>
<script>
localStorage.getItem('mode');
function darkmode() {
mode = "dark";
alert(mode);
if (mode == "light"){
alert("error while changing theme");
}
if (mode == "dark"){
alert("successfully changed to dark mode");
document.body.style.backgroundColor = "#181818";
}
}
function lightmode() {
mode = "light";
alert(mode);
if (mode == "light"){
alert("successfully changed to light mode");
document.body.style.backgroundColor = "#9c9e9e";
}
if (mode == "dark"){
alert("error while changing theme");
}
}
</script>
</body>
</html>