UPDATE: JUST REALIZED THIS ISSUE IS ONLY OCCURRING ON FIREFOX, NOT CHROME
ANOTHER UPDATE: Oddly enough, this problem only occurs locally. When I push it to GitHub, everything works fine. So strange. I suppose that means it's not a major issue.
On my portfolio website, users can choose from three different "skins" in the navbar dropdown menu (None, Christmas, and Easter). This functionality is achieved using a JavaScript script to change the stylesheet attribute. Here's how it's implemented:
function checkSkin() {
var skin = localStorage.getItem("skin");
if (skin == null) {
skin = "default";
}
$("link[type='text/css']").attr('href', "style/" + skin + '.css');
$('select option[value="' + skin + '"]').attr("selected", true);
}
function applySkin() {
console.log(event.target.value);
localStorage.setItem("skin", event.target.value);
checkSkin();
}
When a user switches skins, the local storage retains the chosen skin for subsequent visits. Therefore, if you select "Easter" once, it will remain as "Easter" during future visits.
Each stylesheet primarily alters color schemes, with most of the content remaining consistent across them. Updating styles becomes cumbersome as I have to update all three stylesheets frequently.
I came up with an idea – what if I include two stylesheets in the head tag? One on top, and one below. The script would then change the one below. The revised script now looks like this:
function checkSkin() {
var skin = localStorage.getItem("skin");
if (skin == null) {
skin = "default";
}
$(".subStyle").attr('href', "style/" + skin + '.css');
$('select option[value="' + skin + '"]').attr("selected", true);
}
function applySkin() {
console.log(event.target.value);
localStorage.setItem("skin", event.target.value);
checkSkin();
}
This modification works well, but now the selected skin doesn't persist across pages as before. Each section of the portfolio remembers its own skin selection. For instance, "About Me" might be set to Christmas while Contact remains unchanged unless manually updated.
What could be causing this behavior?
UPDATE:
Here's an excerpt from the HTML at the top of one of my pages to provide better insight into how this setup functions:
<!DOCTYPE html>
<html lang ="en-us">
<head>
<meta charset="UTF-8">
<title>Downloads</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" class="subStyle" type="text/css" href="style/default.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="portfolio.js"></script>
</head>
<body onload="showStuff(), checkSkin()">
Here's where the skin is selected:
<span class="skin" style="float:right;">Change Skin? <select onChange="applySkin(event);">
<option value="default">None</option>
<option value="easter">Easter</option>
<option value="christmas">Christmas</option></select>
</span>