Код работает в Codepen, но не на моем веб-хосте

Question

У меня есть скрипт изменения контраста, который устанавливает куки и получает их при загрузке страницы. Это работает Finde на Codepen с консольным журналом: "Contrast greenmono chrome загружен из cook ie!", Но на Webhost, функция dows не находит куки и отвечает "Cookies не найдены!" в консольный журнал.

Я проверял код несколько раз, искал другие похожие ответы, но не могу понять, почему этот код не работает на моем веб-хосте.

У вас есть какие-либо идеи? или предложения, пожалуйста? BR Matthias

Codepen: https://codepen.io/matt-prime/pen/abzGEoY

    // CONTRAST CHANGER
    $(document).ready(function(){
      console.log( "Event Listener ready!" );

      // CHECK FOR COOKIE
      var x = document.cookie;
      if(x=='blackwhite') {
        blackwhite();
        console.log( "Contrast blackwhite loaded from cookie!" );
      }

      else if(x=='whiteblack') {
        whiteblack();
        console.log( "Contrast whiteblack loaded from cookie!" );
      }

      else if(x=='yellowblue') {
        yellowblue();
        console.log( "Contrast yellowblue loaded from cookie!" );
      }

      else if(x=='blueyellow') {
        blueyellow();
        console.log( "Contrast blueyellow loaded from cookie!" );
      }

      else if(x=='bernsteinmonochrome') {
        bernsteinmonochrome();
        console.log( "Contrast bernsteinmonochrome loaded from cookie!" );
      }

      else if(x=='greenmonochrome') {
        greenmonochrome();
        console.log( "Contrast greenmonochrome loaded from cookie!" );
      }

      else if(x=='commodore64') {
        commodore64();
        console.log( "Contrast commodore64 loaded from cookie!" );
      }

      else {console.log( "No cookies found!" );
      }

      // CONTRAST DEFAULT
      $(".change-reset").click(function(){
     $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow contrast-monochrome-bernstein contrast-monochrome-gruen contrast-commodore64");
        // RESET COOKIE
        document.cookie=1
        console.log( "Contrast cookie reset!" );
      });

      // CONTRAST BLACK WHITE
      $(".changeBW").click(function(){blackwhite();});

      // CONTRAST WHITE BLACK
      $(".changeWB").click(function(){whiteblack();});

      // CONTRAST YELLOW BLUE
      $(".changeYB").click(function(){yellowblue();});

      // CONTRAST BLUE YELLOW
      $(".changeBY").click(function(){blueyellow()});

      // KONTRAST BERNSTEIN MONOCHROM
      $(".changeBM").click(function(){bernsteinmonochrome()});

      // CONTRAST GREEN MONOCHROM
      $(".changeGM").click(function(){greenmonochrome()});

      // CONTRAST COMMODORE 64
      $(".changeC64").click(function(){commodore64()});

    // CONTRAST LAYOUT CSS CLASSES
    function blackwhite(){
      $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow contrast-monochrome-bernstein contrast-monochrome-gruen contrast-commodore64");
      $("*").addClass("contrast-black-white");
      $("i.icon.fas.fa-adjust.contrast-black-white").removeClass("contrast-black-white");
      $("span.btn-label.contrast-black-white").removeClass("contrast-black-white");
      document.cookie = 'blackwhite';
      console.log( "Contrast cookie blackwhite set!" );
    }

    function whiteblack(){
      $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow contrast-monochrome-bernstein contrast-monochrome-gruen contrast-commodore64");
      $("*").addClass("contrast-white-black");
      $("i.icon.fas.fa-adjust.contrast-white-black").removeClass("contrast-white-black");
      $("span.btn-label.contrast-white-black").removeClass("contrast-white-black");
      document.cookie = 'whiteblack';
      console.log( "Contrast cookie whiteblack set!" );
    }

    function yellowblue(){
      $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow contrast-monochrome-bernstein contrast-monochrome-gruen contrast-commodore64");
      $("*").addClass("contrast-yellow-blue");
      $("i.icon.fas.fa-adjust.contrast-yellow-blue").removeClass("contrast-yellow-blue");
      $("span.btn-label.contrast-yellow-blue").removeClass("contrast-yellow-blue");
      document.cookie = 'yellowblue';
      console.log( "Contrast cookie yellowblue set!" );
    }

    function blueyellow(){
       $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow contrast-monochrome-bernstein contrast-monochrome-gruen contrast-commodore64");
      $("*").addClass("contrast-blue-yellow");
      $("i.icon.fas.fa-adjust.contrast-blue-yellow").removeClass("contrast-blue-yellow");
      $("span.btn-label.contrast-blue-yellow").removeClass("contrast-blue-yellow");
      document.cookie = 'blueyellow';
      console.log( "Contrast cookie blueyellow set!" );
    }


  })

Answer 1

Это не работает для codepen и для меня. Я думаю, что произошло следующее:

1. В какой-то момент вы запускаете код в codepen, который создал повара ie со значением Вы хотели
2. Файлы cookie сохраняются в домене, в котором они работают, особенно если у них нет срока действия
3. Теперь, когда вы запускаете страницу в codepen, вы получаете результат.

Очистите куки в codepen и убедитесь, что у вас будет тот же результат. Это имеет смысл.

Вы должны установить повара ie где-нибудь (и нет кода, который вы делаете это). Затем, когда страница загружается, она проверяет значение.

Вы можете вернуть не-Http cook ie со стороны сервера, для которой установлено значение cook ie. Реализация зависит от технологии бэкэнда. На веб-сервере также можно вводить готовку ie.

Единственное место, где вы устанавливаете приготовление ie, это когда повар ie уже установлен, и вы переустанавливаете его в функциях. .