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

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

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

 

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

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

 

 

 

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講座を開催しています。

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