[Javascript] Cookieをクリアする
このページのタグ:[Javascript] [Cookie]
Cookieからデータを削除するコードを紹介します。

概要

Cookieからデータを削除するには、指定したキーに何も代入しないことでクリアできます。

書式

document.cookie = "value=;";
「=」の右側を空欄にすると、値がクリアできます。

コード

下記のコードを記述します。

clearCookie.html

クッキーのvalue フィールドをクリアするコードです。

<!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>

writeCookie.html

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

<!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>

readCookie.html

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

<!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>

実行結果

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


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


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


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

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)