代码可以在Codepen中运行，但不能在我的网络主机上运行

Question

我有一个对比度更改脚本，它设置cookie并在页面加载时获取它们。这是在Codepen上使用控制台日志工作的finde：“对比度绿色单色加载自cookie!"，但在网络主机上，函数可能找不到任何cookie，并响应”没有找到cookie！“至控制台日志。

我已经检查了几次代码，搜索了其他相关的答案，但我想不出为什么这个代码在我的网站主机上不能工作。

请问你有什么想法或建议吗？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中运行代码，该cookie使用您想要的值创建cookie。
2. cookie会保存在它们运行的域中，特别是当cookie中没有过期日期时
3. 现在，当您在codepen中运行页面时，您会得到一个结果。

清除codepen中的cookie，并看到您将得到相同的结果。这事儿可以理解。

您必须在某个地方设置cookie (没有代码可以这样做)。然后，当页面加载时，它会检查该值。

您可以从服务器端返回您设置的cookie值的非Http cookie。具体实现依赖于后端技术。您也可以在web服务器上注入cookie。

设置cookie的唯一位置是已经设置cookie并在函数中重新设置它的时候。