I am making a variable that saves its value on multiple pages, and I am using localstorage to do this. The problem is that it doesn't save the variable, and also gives no errors.
What I have tried to do before posting this: I searched up youtube tutorials on localstorage I tried using this website https://www.taniarascia.com/how-to-use-local-storage-with-javascript/ I searched it up here on stackoverflow
And I can't find an answer to this.
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>
Aucun commentaire:
Enregistrer un commentaire