cookieについて

【概要】

1.cookieとは

2.cookieを保存するプログラム

3.開発環境

1.cookieとは

Webサーバーへ接続してきたWebブラウザに対して一連のやり取りや、その状態や情報を維持し管理する仕組みのことです！HTTPはステートレスなプロトコルなので、ステートフルにしたい問題を解決します！
検証ツールで開いて"Application"の"cookies"を開くと、Webブラウザで保存されている情報がみれます！


2.cookieを保存するプログラム

<script>
function OnLinkClick(){
  window.location.href = '/';
}
  var btn_b = document.getElementById("btn-mode");
    btn_b.addEventListener("change", () => {
      if (btn_b.checked == true) {
        document.cookie = 'bgcolor=dark; path=/'; 
    dark();
      } else {
        document.cookie = 'bgcolor=light; path=/';
    light();
      }
});
<script>

ダークモードを作っている時に画面遷移すると過去の画面設定が外れて(ダークモードにしているのに画面遷移するとライトモードに戻る)しまいます。そのためにcookieでその設定を保存しました。
id要素である"btn-mode"を取得するとcookieにダークとライトを保存するようにしています。checkされていれば"dark"を取得し、されていなければ"light"を取得するようにしています！

参考にしたURL:
cookieをjavascriptで設定、取得、削除する簡単な方法

3.開発環境

Ruby 2.6.5
Rails 6.0.3.3
Visual Studio Code 1.49.2