🍪

任意のcookieを設定、取得する関数

2023/01/31に公開

JavaScript

tech

任意のcookieを設定・取得する関数です
この例ではtimeObjの値をmax-ageに反映させます

setCookie()の第一引数にcookie名、第二にcookieの中身、第三にmax-age（秒）を任意に設定します

const timeObj = {
  sec: 10, //秒
  min: 0, //分
  hour: 0, //時
  day: 0 //日
}

const date = new Date();

//set cookie name
const cookieName = "stopLoadingAnimation";

//set finished time
const finishedTime = setFinishTime(date.getTime() + additionTime(timeObj));

//set max-age
const maxAge = additionTime(timeObj, false);

//set arbitrary cookie
setCookie(cookieName, finishedTime, maxAge);

//get cokkie value
getCookieValue(cookieName);

/**
 * return finish time
 * @param {*} timestamp 
 * @returns 
 */
function setFinishTime(timestamp) {
  let date = new Date(timestamp);
  let options = { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
  return date.toLocaleDateString('ja-JP', options);
}

/**
 * return addition time in milliseconds or seconds
 * @param {*} obj time obj
 * @param {*} isMillisecond 
 * @returns 
 */
function additionTime(obj, isMillisecond = true) {
  const Min = obj.min * 60;
  const Hour = obj.hour * 60 * 60;
  const Day = obj.day * 24 * 60 * 60;
  const Time = obj.sec + Min + Hour + Day;

  //when you want to use milliseconds for calculations
  if (isMillisecond) {
    return Time * 1000;
  } //when you want to set true time
  else {
    return Time;
  }
}

/**
 * set an arbitrary cookie
 * @param {*} cookieName cookie name
 * @param {*} cookieValue cookie value
 * @param {*} cookieAge max-age
 */
function setCookie(cookieName, cookieValue, cookieAge) {
  document.cookie = `${cookieName}=${cookieValue}; max-age=${cookieAge}`;
}

/**
 * get a specific cookie
 * @param {*} cookieName 設定するcookieの名前
 * @returns 
 */
function getCookieValue(cookieName) {
  const cookieNameLen = cookieName.length
  const allCookies = document.cookie;
  const cookieIdx = allCookies.indexOf(`${cookieName}=`);

  //cookieが見つからない場合はnullを返す
  if (cookieIdx == -1) return null;

  if (cookieIdx != -1) {
    const start = cookieIdx + cookieNameLen + 1;
    let end = allCookies.indexOf(";", start);
    if (end == -1) end = allCookies.length;
    let value = allCookies.substring(start, end);
    return value;
  }
}

概要

stopLoadingAnimation=2023年5月4日(木) 22:51:34のように任意のクッキー名と値を設定できる
const cookieIdx = allCookies.indexOf(${cookieName}=);で、stopLoadingAnimationのsの位置を取得
const start = cookieIdx + cookieNameLen + 1;で=の次の2の位置を取得
let end = allCookies.indexOf(";", start);でstartの位置から、つまり2023年の2から";"がある位置を探す
cookieの一番最後は";"が付かないので、stopLoadingAnimationが最後であればend = -1となり、if (end == -1) end = allCookies.length;が実行される

何に使ったか

「アニメーションを止めるボタン」を押すと設定した時間が経過するまでアニメーションを走らせない。任意のクッキーがあるかどうかでアニメーションの表示openingAnimation()、非表示openingHide()を切り替える時

/**
 *  event when stop button is clicked
 */
DOM.stopLoadingAnimationButton.addEventListener("click", (el) => {
  const date = new Date();
  const finishedTime = setFinishTime(date.getTime() + additionTime(timeObj));
  const maxAge = additionTime(timeObj, false);
  el.target.innerText = `ローディングアニメーションが${finishedTime}まで止まります`;
  setCookie(cookieName, finishedTime, maxAge);
});
  
/**
 * event when start button is clicked
 */
DOM.startLoadingAnimationButton.addEventListener("click", (el) => {
  el.target.innerText = "ローディングアニメーション再開を設定しました";
  setCookie(cookieName, "", 0);
  timeParagraph.setAttribute("style", "display:none;");
});
  
//when cookie is found
if (document.cookie.indexOf(cookieName) !== -1) {
  DOM.stopLoadingAnimationButton.setAttribute("style", "display: none;");
  DOM.startLoadingAnimationButton.removeAttribute("style", "display: none;");
  openingHide();
} else { //when cookie is not found
  DOM.stopLoadingAnimationButton.removeAttribute("style", "display: none;");
  DOM.startLoadingAnimationButton.setAttribute("style", "display: none;");
  openingAnimation();
}

「○月●日△時■分までアニメーションが止まります」のような文言を表示させるとき

//取得したいcookieの値を代入
nowCookieVal = getCookieValue(cookieName);

//時間表示テキスト
const timeParagraph = document.querySelector(".js-time-loadingAnimation");
if (nowCookieVal != null) {
   timeParagraph.innerText = `${nowCookieVal}までローディングアニメーションが止まります`
}

sessionStorageを併用し初回訪問時のみアニメーション実行、そのあとは設定した時間経過後に再度アニメーションが走るようにする

const skipOpeningAnimation = () => {
  DOM.opening.setAttribute("style", "display: none;");
}

const webStorage = () => {
  const wsCookieName = "sessionStorage";
  if(getCookieValue(wsCookieName) === null) {
    sessionStorage.removeItem("access");
  }

  if (sessionStorage.getItem("access")) {
    log("アクセス2回目以降です")
    skipOpeningAnimation();
  } else {
    sessionStorage.setItem("access", 0);
    log("初回アクセス！");

    const date = new Date();
    const finishedTime = setFinishTime(date.getTime() + additionTime(timeObj));
    const maxAge = additionTime(timeObj, false);
    setCookie(wsCookieName, finishedTime, maxAge)
    openingAnimation();
  }
}
// sessionStorage.removeItem("access");
webStorage();

概要

何に使ったか

Discussion