編輯:剛剛發現這種情況發生在FIREFOX上，而不是CHROME上
另一個編輯:奇怪的是，這只發生在當地。在github上運行良好，我克隆了它，卻發現了這個bug。你想怎么做就怎么做。我猜這意味著沒什么大不了的。
好的，在我的作品集網頁上，我讓用戶選擇三種不同的& quot皮膚& quot從導航欄的下拉菜單中選擇(無(默認)、圣誕節和復活節)。這只是使用一個javascript腳本來改變樣式表標簽中的屬性。它看起來是這樣的:
function skinCheck() {
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 setSkin() {
console.log(event.target.value);
localStorage.setItem("skin", event.target.value);
skinCheck();
}現在，當用戶切換皮膚時，本地存儲會記住這一點，所以如果您& quot復活節& quot在一個部分，你是& quot復活節& quot在接下來的時間里，你會成為& quot復活節& quot當你打烊回來的時候。
每個樣式表只是改變了一些顏色。它們之間的絕大多數信息是相同的。這使得更新我的樣式非常繁瑣，因為我大部分時間都必須更新所有三個樣式表。
所以，我有了一個主意。如果我在head標簽中放兩個樣式表會怎么樣？一個在上面，一個在下面。下面這個是劇本改的。所以現在我的腳本是這樣的:
function skinCheck() {
var skin = localStorage.getItem("skin");
if (skin == null) {
skin = "default";
}
$(".subStyle").attr('href', "style/" + skin + '.css');
$('select option[value="' + skin + '"]').attr("selected", true);
}
function setSkin() {
console.log(event.target.value);
localStorage.setItem("skin", event.target.value);
skinCheck();
}這已經足夠好了，除了現在，皮膚的選擇似乎不再像以前那樣一頁一頁地堅持。我的作品集的每一部分都是獨立存在的。即& quot關于我& quot變成圣誕節并保持圣誕節，但聯系頁面不會改變，直到我改變它，或反之亦然。
究竟是什么導致了這一切？
編輯:
這是我的一個頁面頂部的一個HTML片段，讓你更好地了解它是如何工作的:
<!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(), skinCheck()">這里是選擇皮膚的地方:
<span class = "skin" style = "float:right;">Change Skin? <select onChange = "setSkin(event);">
<option value = "default">None</option>
<option value = "easter">Easter</option>
<option value = "christmas">Christmas</option></select>
</span>我在CodePen上寫了一個快速(并且難看)的復制來嘗試診斷這個問題。雖然您的代碼的其余部分沒有在上面公布，但是我可以復制您的行為的唯一方法是在頁面加載時刪除對skinCheck()的調用。
我猜由于某種原因，這個函數并沒有在每次頁面加載時被調用。在函數的頂部添加一個簡單的console.log調用會讓您知道是否是這種情況。例如:
function skinCheck() {
var skin = localStorage.getItem("skin") || 'default';
$(".subStyle").attr('href', "style/" + skin + '.css');
$('select option[value="' + skin + '"]').attr("selected", true);
console.log('Setting page style (post jquery load)');
}
skinCheck();復制:https://codesandbox.io/s/crazy-ioana-b0n16z?文件=/index.html
這里需要注意的是，由于jQuery和你的主題CSS可能需要一點時間來加載，所以頁面在加載時會有點抖動。在這個架構中，解決這個問題的一個方法是讓加載狀態變得不透明，然后覆蓋頁面，直到主題被加載。