[Javascript] jQuery.Cookie を利用して Cookieに書き込まれた値を削除する
このページのタグ:[Javascript] [jQuery] [Cookie]
jQuery.Cookie を利用して Cookieに書き込まれた値を削除するコードを紹介します。

書式

通常は、"removeCookie()" メソッドを利用します。
$.removeCookie([削除するCookieのキー名]);

コード

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

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
  <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    $(document).ready(function () {
      $.removeCookie("Name");
      $.removeCookie("Age");

      $("#msg").text("Cookieをクリアしました。");
    });
  </script>

</head>
<body>
  <div id="msg"></div>
</body>
</html>

実行結果

Cookieに値が書き込まれている状態にします。書き込まれている値を確認します。Cookieに書き込まれている値を参照するコードはこちらの記事を参照してください。


上記のHTMLファイルにWebブラウザでアクセスします。下図の画面が表示されます。


先ほどのCookieの値を確認するページをWebブラウザで開きます。値がクリアされ、"undefined" になっていることが確認できます。

別の方法

別の方法として、Cookieの値書き込み時にnullを与えて、nullで上書きする方法があります。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
  <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    $(document).ready(function () {
      $.cookie("Name", null);
      $.cookie("Age", null);

      $("#msg").text("Cookieをクリアしました。");

    });
  </script>

</head>
<body>
  <div id="msg"></div>
</body>
</html>


また、Expires に -1を与えてCookieを有効期限切れにして、クリアする方法もあります。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
  <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    $(document).ready(function () {
      $.cookie("Name","", {expires: -1});
      $.cookie("Age", "", {expires: -1});
      $("#msg").text("Cookieをクリアしました。");
    });
  </script>

</head>
<body>
  <div id="msg"></div>
</body>
</html>

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