javascript - 代码可以在 Codepen 中运行，但不能在我的虚拟主机上运行

Question

我有一个对比度更改脚本，它设置 cookie 并在页面加载时获取它们。 这是 Codepen 上的工作发现，带有控制台日志:“对比从 cookie 加载的绿色单色!”， 但在 Webhost 上，该函数找不到任何 cookie，并响应“未找到 cookie!”到控制台日志。

我已多次检查代码，搜索其他相关答案，但我无法弄清楚为什么此代码无法在我的网络主机上运行。

请问您有什么想法或建议吗？ BR 马蒂亚斯

代码笔: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
2. Cookie 会保留在它们运行的​​域中，尤其是当其中没有过期日期时
3. 现在，当您在 codepen 中运行该页面时，您会得到结果。

清除codepen中的cookie，看看你会得到相同的结果。这是有道理的。

您必须在某处设置 cookie(并且没有代码可以执行此操作)。然后，当页面加载时，它会检查该值。

您可以从您设置 cookie 值的服务器端返回一个非 Http cookie。实现取决于后端技术。您也可以在 Web 服务器上注入(inject) cookie。

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