Cookieの操作で初めて知ったことがあったので共有と備忘録の意味を込めて記事にします。

業務でCookieの有無によってDOMの操作（表示切り替えなど）を行うこともしばしばあると思います。
その時に「何で表示がきりかわらないんだ？」となってその理由がCookieの属性によるものでした。

Cookieの属性について

Cookieには　2つの属性があります。
JavaScriptの観点から見ると2つの属性はdocument.cookieでアクセスできるかできないかの違いがあります。

JavaScriptでアクセスするためにはSecureで追加する必要があります。

ただ、アクセスされてしまう危険性があるのでCookieの付与する際の処理は十分な注意が必要です。

Cookieを操作する時には属性によってJavaScriptでは操作できないので注意してください！

おまけ：Cookieを操作するときの便利なライブラリ

簡単にCookieの取得処理がかけます。

ライブラリを使う前

const result = new Array();
const allCookies = document.cookie;

if(allCookies) {
  const cookies = cookies.split('; ');
  for(let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].split('=');
    result[cookie[0]] = decodeURIComponent(cookie[1]);
  }
}

if(result['hoge']) {
  // 特定のcookieがあった時の処理
}

ライブラリを使った後

import Cookies from 'js-cookie';
const cookie = Cookies.get('hoge');

if(cookie) {
  // 特定のcookieがあった時の処理
}