Cookieをクリアする - JavaScript

Cookieからデータを削除するコードを紹介します。

概要

Cookieからデータを削除するには、指定したキーに何も代入しないことでクリアできます。または、Cookieの有効期限を過去日に設定することでCookieを削除する方法もあります。

方法 : 指定したキーに何も代入しない

書式

document.cookie = "value=;";

「=」の右側を空欄にすると、値がクリアできます。

コード

下記のコードを記述します。
クッキーのvalue フィールドをクリアするコードです。

clearCookie.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    function onload() {
      document.cookie = "value=; max-age=60";
      document.getElementById("msg").innerHTML = "Cookieの値を消去しました。";
    }
  </script>
</head>
<body onload="onload();">
  <div id="msg"></div>
</body>
</html>

Cookieにvalueキーに"Pegnuin"の値を書き込むコードです。

writeCookie.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    function onload() {
      document.cookie = "value=" + encodeURIComponent("Penguin");
    }
  </script>
</head>
<body onload="onload();">
  <div id="msg"></div>
</body>
</html>

Cookieのvalueキーの値を表示するコードです。

readCookie.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
    function onload() {
      var cookies = document.cookie;
      var cookieItem = cookies.split(";");
      var cookieValue = "";

      for (i = 0; i < cookieItem.length; i++) {
        var elem = cookieItem[i].split("=");
        if (elem[0].trim() == "value") {
          cookieValue = unescape(elem[1]);
        } else {
          continue;
        }
      }

      document.getElementById("msg").innerHTML = "値:" + cookieValue;
    }
  </script>
</head>
<body onload="onload();">
  <div id="msg"></div>
</body>
</html>

解説

clearCookie.html の document.cookie="value=; max-age=60"; がCookieのクリア処理です。valueに空の値を代入してCookieをクリアします。

実行結果

writeCookie.html にアクセスします。この画面は何も表示されませんがCookieへの書き込みが実行されます。

その後 ReadCookie.htmlにアクセスします。Cookieには"value=Penguin"が書き込まれるので、Cookieの値には"Penguin"が表示されます。

続いて、clearCookie.htmlにアクセスします。Cookieのキー名"Value"の値に空白を代入して値をクリアします。Cookieの値が消去された旨のメッセージが表示されます。

再び、readCookie.htmlにアクセスします。Cookieのキー名"Value"の値は削除されているため、画面には何も表示されません。

Cookieの値を消去できたことが確認できました。

方法 : Cookieを有効期限切れにする

書式

document.cookie = "max-age=0;";

max-ageはCookieの有効期限までの秒数を設定します。0 または負の数を設定した場合は、すぐに期限切れとなります。

コード

ExpiredCookie.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
    function onload() {
     document.cookie = "value=none;max-age=0;";
      document.getElementById("msg").innerHTML = "Cookieを期限切れにしました。";
    }
  </script>
</head>
<body onload="onload();">
  <div id="msg"></div>
</body>
</html>