icon
icon

JavaScriptでcookieを削除する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでcookieを削除する方法について現役エンジニアが解説しています。cookieはmax-age(存続する時間)とexpires(破棄する日付)を持っています。削除はmax-age=0にする、またはexpires=過去の日付とする、の二つの方法で可能です。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptでcookieを削除する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでcookieを削除する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

cookieとは

cookieとは、ブラウザに保存されるテキストデータのことを指します。key=valueという形式でデータを持っています。

cookieにはサイトの訪問回数やユーザーのID、パスワードなどが保存されています。これはWebサイトを訪問した時に、IDやパスワードを入力してログインの手間を省いたりショッピングサイトでのカートに入っている商品の情報を保存するのに使われています。

よくセッションと比較されますが、sessionはサーバー側でデータを持つのに対しcookieはブラウザ側で情報を持つという違いがあります。そのためcookieはユーザー側で削除することができます。

Webサイトを作成する際には、必須の知識になるのでしっかりと押さえておきましょう。

JavaScriptでcookieを削除する方法

cookieを削除する方法はいくつかありますが、JavaScriptでも削除することが可能です。cookieはmax-age(cookieの存続する時間を持っているkey)とexpires(cookieを破棄する日付を持っているkey)を持っています。

削除はmax-age=0にする、またはexpires=過去の日付とする、の二つの方法で可能です。JavaScriptでは以下のようにcookieを操作します。

 

document.cookie = "key=value;key2=value2"

 

key=valueでcookieを操作します。連続して値を入れる場合は;で繋ぎます。

[PR] コーディングで副業する方法とは

実際に書いてみよう

それでは実際にcookieを削除してみましょう。以下のようにコーディングして、値の作成・削除を行ってみます。

document.cookie = "key1=value1"
document.cookie = "key2=value2"

  
console.log(document.cookie)

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

var dt = new Date('2000-12-31T23:59:59Z');
  
document.cookie = `key2=;expires=${dt.toUTCString()}`;

console.log(document.cookie)

 

以上がcookieの削除方法です。解説は以上です。

 

筆者プロフィール

メンター金成さん。

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。