jquery.cookie.jsでのクッキーセットと発動のさせ方について（サイトの背景変更で使用）

Question

慶応のサイト模写でサイトの背景色の変更のコードをjQueryで書いています。

背景は通常は白で、黒をクリックすると黒くなります。
その状態で、サイトを再読込すると、背景が黒であるという情報がクッキーに保存されていて
黒背景のサイトが表示されます。

これをjQueryで再現したいのですが、自分で試行錯誤してみましたができなかったので
お知恵をいただけましたら大変助かります。

クッキー設定がないもので背景変更がうまく行っているコード

<div class="col-md-4">
                <div class="upper-h">
                  <div class="uh-right mb-3">
                    <ul class="list-inline list-unstyled text-right">
                        <li class="list-inline-item"><a href="#" class="text-dark border-right pr-4"><u>サイトマップ</u></a></li>
                        <li class="list-inline-item pt-3 pb-3"><a href="#" class="text-dark border-right pl-4 pr-4"><u>English</u></a></li>
                        <li class="list-inline-item pt-3 pb-3"><a href="#" class="text-dark pl-4"><u>採用情報</u></a></li>
                    </ul>
                    
                      <dl class="textSize list-inline text-right">
                        <dt class="list-inline-item pb-1 align-bottom" ><small>文字<br>サイズ</small></dt>
                        <dd id="textLarge" class="list-inline-item border p-2 mr-0"><a href="#">拡大</a></dd>
                        <dd id="textNormal" class="textDefault list-inline-item border p-2"><a href="#">標準</a></dd>
                        <dt class="list-inline-item pb-1 align-items-center" ><small>背景変更</small></dt>
                        <dd  class="list-inline-item border p-2 mr-0"><a  id="black" href="#">黒</a></dd>
                      </dl>

var $fblackback = $('.base,.header-menu,.nvb-colour,.dropdown-menu,.thr-dropdown-m,.taisetu-back,.for-purpose,.for-category,.tab-area,.nav-pills,.tab-content, .panel_area,.card-body,.admap_outer,.rec_infoarea,.access,.bottom-slider,.for-category ul,.card,#header-text');
 var $lfmandcb = $('.upper-h .uh-right dl dd a,.nav-link,.nav-link.active,.tcard .btn-link,.fp-item a');
 var $bluetowhf = $('li a,.link_list a');

 
$(function(){
  $('#black').on('click',() => {
   if ($fblackback.hasClass('blackback')){
     $fblackback.removeClass('blackback');
     $('#headerlogo').find('img').attr('src', '../img/logo_01.png');
     $("#black").text($("#black").text().replace("白", "黒"));
     $lfmandcb.css('color','#212529');
     $bluetowhf.css('color','#007bff');
     
     // クッキー破壊
     
     
     
   }
   else{
     
     $fblackback.addClass('blackback');
     $("#black").text($("#black").text().replace("黒", "白"));
     $('#headerlogo').find('img').attr('src', '../img/blackverlogo.png');
     $lfmandcb.css('color','#fff');
     $bluetowhf.css('color','#fff');
     
     // クッキーセット
     
     
   }
   
    });
   });
 

自分で書いてみたけれどクッキー設定や保存、破壊などができていないコード。
このコードだと、背景変更もできなくなってしまいました。

var $fblackback = $('.base,.header-menu,.nvb-colour,.dropdown-menu,.thr-dropdown-m,.taisetu-back,.for-purpose,.for-category,.tab-area,.nav-pills,.tab-content, .panel_area,.card-body,.admap_outer,.rec_infoarea,.access,.bottom-slider,.for-category ul,.card,#header-text');
 var $lfmandcb = $('.upper-h .uh-right dl dd a,.nav-link,.nav-link.active,.tcard .btn-link,.fp-item a');
 var $bluetowhf = $('li a,.link_list a');
$(function(){
  if($.cookie("havingb")){

    $('#black').on('click',() => {
      if ($fblackback.hasClass('blackback')){
        $fblackback.removeClass('blackback');
        $('#headerlogo').find('img').attr('src', '../img/logo_01.png');
        $("#black").text($("#black").text().replace("白", "黒"));
        $lfmandcb.css('color','#212529');
        $bluetowhf.css('color','#007bff');
        $.cookie("havingb","");
        // クッキー破壊
      }
      else{
      
        $fblackback.addClass('blackback');
        $("#black").text($("#black").text().replace("黒", "白"));
        $('#headerlogo').find('img').attr('src', '../img/blackverlogo.png');
        $lfmandcb.css('color','#fff');
        $bluetowhf.css('color','#fff');
        $.cookie("havingb", $fblackback.hasClass('blackback'));
        // クッキーセット
      }
   });
    }
    else{

    }

  });

背景を黒に変更したあとにサイトを再読込した時に、黒背景の状態で読み込めるようにするにはどのようにクッキーセットのjQueryをかけばいよいでしょうか？

教えていただきますよう、どうぞ、よろしくお願いいたします。

Answer 1

jquery.cookie.jsは2014年以来更新されておらずsameSiteオプションの指定などできません。
ご利用は控えてjs.cookie.jsをご利用ください

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const bs=document.body.style
  let bgColor=Cookies.get('bgColor')||"white";
  bs.backgroundColor=bgColor;
  document.querySelectorAll('[data-bgcolor]').forEach(x=>{
    x.addEventListener('click',()=>{
      bgColor=x.dataset.bgcolor;
      bs.backgroundColor=bgColor;
      Cookies.set('bgColor',bgColor);
    });
  });
});
</script>
<input type="button" value="白" data-bgcolor="white">
<input type="button" value="黒" data-bgcolor="black">
<input type="button" value="赤" data-bgcolor="red">

Comments

[yuiran]

Javascriptでのコードを教えていただきありがとうございました。しかし、私は実はまだJavascriptは勉強していないのです…私が指示している先生の教えで、jQueryをメインに習っている段階で、今回の模写をすることになりました。なので、jQueryでのクッキー保存の方法を書く必要があります。
質問で、」私がどのjQueryのcdnやファイルを使っているのかHTMLに書きませんでしたので補足として書きます。

```html```
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery.cookie-1.4.1.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<script type="text/javascript" src="js/jquery.js"></script>
```
おっしゃるように、js.cookie.jsで書いているつもりです。
よろしくお願いいたします。

Answer 2

それはクッキーに値の設定があることをifで確認してからイベントを追加するコードになってるからです。
クッキーに値が設定されていなければイベントが追加されないのでイベント内で記述されている設定変更コードも実行されないでしょう。
ifの中のコードは一旦ifの外に出したうえで、クッキーに値があるときだけ$fblackback.addClassするコードにでもすればいいのではないでしょうか。

Comments

[yuiran]

考え方のヒントをありがとうございます。いただきましたアドバイスをもとにこのようなコードを書いてみました。
あと、HTMLファイルに記載した今回のjQueryのファイルやCDNについて書いていなかったので合わせてこちらに書きます。

```html```
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery.cookie-1.4.1.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<script type="text/javascript" src="js/jquery.js"></script>
```

jQuery.jsファイルは私がこの模写サイト用に記述しているjQueryのファイルです。

考えたコード
```jQuery```
```
var $fblackback = $('.base,.header-menu,.nvb-colour,.dropdown-menu,.thr-dropdown-m,.taisetu-back,.for-purpose,.for-category,.tab-area,.nav-pills,.tab-content, .panel_area,.card-body,.admap_outer,.rec_infoarea,.access,.bottom-slider,.for-category ul,.card,#header-text');
var $lfmandcb = $('.upper-h .uh-right dl dd a,.nav-link,.nav-link.active,.tcard .btn-link,.fp-item a');
var $bluetowhf = $('li a,.link_list a');
var $bblackc= $fblackback.hasClass('blackback') == true

$(function(){
if($.cookie("havingb")){
$('#black').on('click',() => {
$fblackback.removeClass('blackback');
$('#headerlogo').find('img').attr('src', '../img/logo_01.png');
$("#black").text($("#black").text().replace("白", "黒"));
$lfmandcb.css('color','#212529');
$bluetowhf.css('color','#007bff');
// $.cookie("havingb","");
})}

else{

$('#black').on('click',() => {
$fblackback.addClass('blackback');
$("#black").text($("#black").text().replace("黒", "白"));
$('#headerlogo').find('img').attr('src', '../img/blackverlogo.png');
$lfmandcb.css('color','#fff');
$bluetowhf.css('color','#fff');
$.cookie("havingb","$bblackc");
}
)}
});

```
こうしてみたのですが、visual studio codeでgo liveの環境では、背景色の変更もできなくなっていました。
ファイルをクロムのブラウザで表示した環境では、背景を黒くすることはできましたが、再読込しても、黒背景の状態は維持されず、また、黒背景になったあとに、白背景の戻すこともできなくなっていました。

お手数をおかけしてしまい申し訳ありませんが、もう少し噛み砕いて
今回のクッキー設定の部分についてご指導いただけますと幸いです。

どうぞ、よろしくお願いいたします。