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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(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] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に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を使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。