Cookieを操作する際にライブラリを入れるほどではなかったため
JavaScriptの汎用的なユーティリティを作成しました。

JavaScriptでcookieをセットする

ユーティリティ関数

Utills.jsCopy code// expiresは日にちにしています。
export const setCookie = (name, value, expires) =>{
    const date = new Date();
    date.setTime( date.getTime() + 1000 * 3600 * 24 * expires );
    document.cookie = `${name}=${value}; path=/;  expires=${date.toUTCString()}`;
}

cookieをセットする処理

main.jsCopy codeimport { setCookie } from 'Utills.js;
setCookie('Cookieの名前', ' Cookieの値', '1' );

コードの解説

日付を取得する

new Dateで現在の時刻を取得

JavaScriptCopy codeconst date = new Date();

日付をセットする

1000 * 3600 * 24 *ミリ秒と時間をかけて日単位に直しています。

JavaScriptCopy codedate.setTime( date.getTime() + 1000 * 3600 * 24 * expires );

cookieを変更

JavaScriptCopy codedocument.cookie = `${name}=${value}; path=/;  expires=${date.toUTCString()}`;

JavaScriptでcookieを取得する

ユーティリティ関数

Utills.jsCopy codeexport const getCookie = (name) => {
  const allcookies = document.cookie;
  const position = allcookies.indexOf( `${name}=` );
  if( position != -1 ){
      const startIndex = position + `${name}=`.length;
      var endIndex = allcookies.indexOf( ';', startIndex );
      if( endIndex == -1 ){
          endIndex = allcookies.length;
      }
      return decodeURIComponent(allcookies.substring( startIndex, endIndex ) );
  }
  return null;
}

cookieを取得する処理

main.jsCopy codeimport { getCookie } from 'Utills.js;
getCookie('Cookieの名前' )；

コードの解説

cookie名があるかどうか取得

nameが含まれているかを判定

JavaScriptCopy codeconst allcookies = document.cookie;
const position = allcookies.indexOf( `${name}=` );

cookie名があるかどうか判定

JavaScriptCopy codeif( position != -1 ){
// 処理
}

cookieの値をパースしてデコードして返却

JavaScriptCopy codeconst startIndex = position + `${name}=`.length;
var endIndex = allcookies.indexOf( ';', startIndex );
if( endIndex == -1 ){
  endIndex = allcookies.length;
}
return decodeURIComponent(allcookies.substring( startIndex, endIndex ) );

cookeiを削除する

ユーティリティ関数

Utills.jsCopy codeexport const deleteCookie = (name, value, expires) => {
  const date = new Date('1999-12-31T23:59:59Z');
  document.cookie = `${name}=; path=/;  expires=${date.toUTCString()}`
}

cookieを削除する処理

main.jsCopy codeimport { deleteCookie } from 'Utills.js;
deleteCookie('Cookieの名前' )；

コードの解説

過去の日付をセット

JavaScriptCopy codeconst date = new Date('1999-12-31T23:59:59Z');

cookieを変更

JavaScriptCopy codedocument.cookie = `${name}=; path=/;  expires=${date.toUTCString()}`