javascript - 将 cookie 添加到现有的 Javascript 外部 CSS 文件交换

Question

我已经创建了一个功能来交换 CSS 文件，在重新加载页面或转到网站上的另一个页面之前，它工作得很好。我想，虽然我可以不添加 cookie，但对于任何将关闭网站并稍后返回而不必切换回他们选择的“网站主题”的客户，我也可以这样做。

这是现有的功能:

function changeCSS(cssFile, cssLinkIndex)
{ 
    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

那么，cookie 是否可以使用现有的 newlink 变量及其属性，或者我是否需要在“设置 cookie”函数中创建另一个变量，然后确定 newlink 变量？

Answer 1

我不会交换 css，相反我会制作一个对所有用户都相同的“基本主题”，并且我会在该主题之上应用一个“皮肤”，这样您将拥有更易于维护的代码，并且不必删除/重新添加样式表。所以基本上，当用户选择他最喜欢的皮肤时，我会根据需要附加一个新的样式表。

无论如何，您可以轻松地使用像 https://github.com/carhartl/jquery-cookie 这样的库如果您使用 jQuery 并在用户更改皮肤时即时设置或更改 cookie 的值。您的脚本可以在页面加载期间检查该 cookie，并相应地附加首选皮肤。

ps 如果您想避免 FOUC(无样式内容的闪现)，您需要以某种方式引入加载或在服务器端完成整个操作。