нажмите на ссылку -> установить cookie -> загружена дополнительная таблица стилей

Question

Я написал свой статический сайт, используя hugo .Так как я предпочитаю исторический макет по умолчанию, я прекрасно с ним обращаюсь и не хочу его менять .

Но некоторые читатели предпочитают более современный макет.Я создал это, давайте назовем это pretty.css.(Это просто рядом с моим другим CSS, который называется basic.css.)

Я хочу создать ссылку.При нажатии на эту ссылку должен быть установлен файл cookie.Когда этот файл cookie установлен, pretty.css необходимо добавить в таблицы стилей.

Должна быть вторая ссылка, которая удаляет этот файл cookie.

Answer 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');