单击链接->设置cookie->加载附加样式表答案

【问题标题】：click on link -> set cookie -> additional stylesheet loaded单击链接->设置cookie->加载附加样式表
【发布时间】：2018-06-10 03:52:57
【问题描述】：

我使用hugo 编写了我的静态网站。因为我更喜欢历史默认布局，所以我完全可以接受它我不想改变它。

但有些读者更喜欢更现代的布局。我创建了它，我们称之为pretty.css。（它就在我的另一个 css 旁边，叫做basic.css。）

我想创建一个链接。单击此链接时，应设置 cookie。设置此 cookie 后，必须将 pretty.css 添加到样式表中。

必须有第二个链接，它会删除该 cookie。

【问题讨论】：

您能分享您尝试过的任何代码示例吗？因为可以很容易地在网上找到设置和读取 cookie，而在你的情况下，如果是 php 后端，你需要这样的解决方案 stackoverflow.com/questions/26820724/…
@LoneWolf 但这只能由 JS 完成吗？我没有写任何后端。
是的，更新答案

标签： javascript html css cookies

【解决方案1】：

这是一种纯 js 方式来读取/设置 cookie 并基于它动态加载 css

<script type="text/javascript">
    var preferredCss = getCookie('preferred_css');
    if (!preferredCss || preferredCss.length == 0) 
        preferredCss = 'basic.css';

    document.write('<link rel="stylesheet" type="text/css" href="'+preferredCss+'" />');



    function setCookie(name,value) {
       var expires = "";
       var date = new Date();
       date.setTime(date.getTime() + (60*24*60*60*1000));
       expires = "; expires=" + date.toUTCString();
       document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }
    function getCookie(c_name) {
        if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=");
            if (c_start != -1) {
                c_start = c_start + c_name.length + 1;
                c_end = document.cookie.indexOf(";", c_start);
                if (c_end == -1) {
                    c_end = document.cookie.length;
                }
                return unescape(document.cookie.substring(c_start, c_end));
            }
        }
        return "";
    }
   function deleteCookie(name) {
      document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/';
   };

现在，当用户点击链接设置pretty.css，你只需要像这样调用setCookie，

setCookie('preferred_css','pretty.css');

要删除 cookie，请调用

deleteCookie('preferred_css');

【讨论】：

这适用于当前页面，并且效果很好。谢谢！但我希望它能够在站点范围内工作。
如果您有 home.html 或公共父 html 文件，请在其中包含该代码，以便它适用于所有页面
有效的方法：从任何地方设置 cookie。什么不起作用：从任何地方删除cookie，从任何地方getCookie。我猜，这是关于 var document.cookie
deleteCookie 有一个错误，我现在更正了（添加路径=/）。您现在应该可以从站点的任何位置删除 cookie。