JavaScriptでcookieの有効期限を設定する:max-age, expires

JavaScriptで保存されたcookieはデフォルトではプラウザの終了時に削除されます。削除されないためには、cookieに有効日付または残存期間をセットする必要があります。

cookieに有効期限を設定する方法

cookieの有効期限を設定する方法は2通りの方法があります。

document.cookie = "名前=値; max-age=残存期間";
document.cookie = "名前=値; expires=日付";

max-ageの場合にはcookieの残存期間を秒数で指定します。

expiresの場合にはGMT(グリニッジ標準時)形式の日付を指定します。GMT(グリニッジ標準時)形式への変換は、toGMTString関数で行うことができます。

cookieに有効期限を設定する場合の使用法をサンプルを使って説明します。

入力されたデータを特定の時間だけcookieに保存する

入力された名前と訪問件数を5分間保持して、cookieがセットされている場合にはセットされた値を画面に表示する。

// cookieが使えるか確認
if (navigator.cookieEnabled) {
  var name, count = 1;
  if (document.cookie.indexOf("name=") == -1) { // cookieのセットを確認する。
    name = window.prompt("名前の入力", ""); // cookieがない場合、画面から入力する。
    // name, countの有効期限は5分後をセット
    var now = new Date();
    now.setMinutes(now.getMinutes() + 5);
    document.cookie = "name=" + encodeURIComponent(name) + ";expires=" + now.toUTCString();
    document.cookie = "count=1; max-age=300";
  } else {
    var cookies = document.cookie.split("; "); // cookieを"; "で分割し配列に変換する
    for (var i = 0; i < cookies.length; i++) {     
      var cookie = cookies[i].split("="); // "="で分割して名前と値に分割する
      switch(cookie[0]) {
        case "name" :
          name = cookie[1];
          break;
        case "count" :
          count = cookie[1];
          break;
      }
    }
  }

  alert("名前は" + decodeURIComponent(name) + "です。訪問回数は" + count + "回です。");
  count = parseInt(count) + 1;  // 訪問回数に1加算する
  document.cookie = "count=" + count + "; max-age=300";
}

イベント

2017/12/05(火)
Design Thinking Square