javascript - 代码在 Codepen 中有效，但在我的虚拟主机上无效

问题描述

我有一个对比度更改脚本，它设置 cookie 并在页面加载时获取它们。这是使用控制台日志在 Codepen 上工作的 finde：“从 cookie 加载的对比 greenmonochrome！”，但在 Webhost 上，该函数找不到任何 cookie 并响应“未找到 cookie！” 到控制台日志。

我已经检查了几次代码，搜索了其他相关答案，但我不知道为什么这段代码在我的虚拟主机上不起作用。

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

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!" );
    }


  })

标签： javascriptjquerycookies

它对我来说也不适用于 codepen。我认为发生的事情如下

在某些时候，您在 codepen 中运行代码，该代码使用您想要的值创建了 cookie
cookie 保留在它们运行的域中，尤其是当它们中没有到期日期时
现在，当您在 codepen 中运行页面时，您会得到一个结果。

清除 codepen 中的 cookie 并查看您将获得相同的结果。那讲得通。

您必须在某处设置 cookie（并且没有代码可以这样做）。然后当页面加载时，它会检查该值。

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

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

javascript - 代码在 Codepen 中有效，但在我的虚拟主机上无效

问题描述

解决方案

推荐阅读