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

初心者向けにJavaScriptでcookieを読み書き削除する方法について解説しています。cookieはブラウザに保存されている小さなテキストファイルのことです。ショッピングサイトやログインなどで利用されています。今回はcookieの読み書き削除について解説します。

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

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

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

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

cookieを読み書き削除する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

cookieを読み書き削除する方法

cookieとは、ブラウザに保存される小さな情報です。

例えばログインが必要なWebサイトに2回目以降訪問した場合、ログインIDを入力する欄にあらかじめIDが設定されている場合があります。このような場面で利用されるのがcookieです。

cookieを読み書き削除するにはdocument.cookieを使います。

 

cookieを書き込む

cookieを書き込むには以下のように記述します。cookieは key=値 の形式で保存されます。

document.cookie = "key=value";

書き込みの際にオプションを指定することができます。例えば有効期限を設定する場合はexpiresオプションを使い、以下のように記述します。

document.cookie = "name=value; expires=Thu, 21 Mar 2019 12:00:00 GMT";

 

cookieを読み込む

cookieを読み込むには以下のように記述します。複数のcookieが設定されていた場合、全てのcookieがセミコロンで結合された値が返ります。以下の場合「cookies」という変数に、cookieを読み込んでいます。

var cookies = document.cookie;

 

cookieを削除する

cookieを削除するにはexpiresに0を指定します。

document.cookie = "name=; expires=0";

 

cookie について、詳しくは以下の記事を参考にしてください。

mozilla.org-cookie

 

実際に書いてみよう

今回のサンプルプログラムでは、 cookie を読み書き削除しています。なお、 cookie の読み込みの部分のソースコードは以下を参考にしました。

mozilla.org-cookie

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>cookie sample1</title>
</head>
<body>
  <input id="input1"value=""/><br>
  <button onclick="writeCookie()">書き込み</button><br>
  <button onclick="readCookie()">読み込み</button><br>
  <button onclick="deleteCookie()">削除</button>

  <script type="text/javascript">
    // cookieの値を読み書きする要素
    var input1 = document.getElementById("input1");

    // 書き込み
    function writeCookie() {
      var cookieValue = input1.value;
      document.cookie = "mycookie=" + cookieValue;
      console.log(document.cookie);
    }

    // 読み込み
    function readCookie() {
      var tmp = document.cookie;
      var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)mycookie\s*\=\s*([^;]*).*$)|^.*$/, "$1");
      input1.value = cookieValue;
      console.log(document.cookie);
    }

    // 削除
    function deleteCookie() {
      document.cookie = "mycookie=; expires=0";
      console.log(document.cookie);
    }
  </script>
</body>
</html>

 

実行結果は以下のようになります。はじめにinputに何らかの値を入力して書き込みボタンを押します。cookieの値はコンソールにも表示されるのであわせて確認しましょう。

次にブラウザをリロードします。inputに何も表示されていないことを確認しましょう。

確認したら、読み込みボタンを押します。 保存されていたcookieが読み込まれたことが確認できます。

最後に削除ボタンを押してみましょう。

ブラウザをリロードして読み込みボタンを押すと、cookieに値が入っていないことを確認できます。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

筆者プロフィール

この記事を監修してくれた方

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

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

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