cookieデータを削除するJavaScript入門

cookieを削除するスクリプト

cookieには有効期限があることを以前に学びました。 ということで、 有効期限を過去に設定すればcookieを削除できます。 ではそのようなスクリプトを組んで、確認してみましょう。

以前作った訪問数をカウントするスクリプトは、まだこのページでも有効なはずです。 試しに表示してみます。

もし「1回目の訪問」になっているようなら、 ページを再読み込みしてカウント数を少し増やしておいてください。

では、ボタンを押すことでcookieデータを削除するスクリプトを記述してみます。

<script>

function delCookie()
{
  //日付データを作成する
  var date1 = new Date();
  
  //1970年1月1日00:00:00の日付データをセットする
  date1.setTime(0);
  
  //有効期限を過去にして書き込む
  document.cookie = "counts=;expires="+date1.toGMTString();

  //ページを再読み込みする
  location.reload();

}

</script>

<form>
<input type="button" value="クッキー削除" onclick="delCookie()">
</form>

ボタンを押すと、cookieデータを削除してページを再読み込みします。 訪問回数がリセットされているか確認してください。

スクリプトの解説

では上記スクリプトを見ていきましょう。

関数delCookie()

今回はボタンからJavaScriptを呼び出すために、関数delCookie()を作成しました。 cookieデータを削除して、ページを再読み込みする処理を記述していきます。

過去データの作成

関数の中で最初に、過去データを作成します。 変数date1を宣言し、現在の日付データを入れます。 そしてsetTime()で過去のデータにセットし直します。 setTime()は「1970年1月1日午前0時から経過したミリ秒」の意味でしたので、 括弧内に0を入れると1970年1月1日午前0時になります。

cookieの削除

過去データを作成できたら、cookieに書き込みます。 訪問回数をカウントする時のデータ名は「counts」にしていました。 その値を空欄にし、終了記号「;」も忘れず記入します。 有効期限を先ほどの過去のデータに指定しますが、 GMTに変換することを忘れてはいけません。

cookieデータを削除する場合も「データ名」を入れているので、 cookie内の目的のデータだけ削除できることが分かります。

ページを再読み込み

最後に、ページを再読み込みさせます。location.reload()を使います。 ここまでが関数delCookie()で実行される処理です。

フォームのボタンから関数を呼び出す

ボタンから関数を呼び出すときは、onclickイベントの中にそのまま関数名を記述すればOKでした。

cookieを扱う方法のまとめ

ここまででcookieを扱う方法について見ることができました。 以下に簡単にまとめておきます。

実際にcookieを初めて扱う時には、難しく感じるかもしれません。 私も最初は難しく感じました。 しかし上に挙げた要点さえ理解できれば、恐れる必要はないでしょう。 もう一度しっかり読み返して、十分理解できるよう頑張って下さい。

次のページでは、cookieに関連した書き込み関数、読み込み関数、 削除関数を作ってcookie.jsという外部ファイルにまとめてみたいと思います。 一度作ってしまえば、 必要な時にその外部ファイルを読み込むことで、cookieを楽に扱えるようになります。