JavaScript【 サンプル 】13 ～ クッキー

JavaScript の記述方法のサンプルを挙げてみます。
今回は、閲覧者の情報を一時的に保存するクッキー（ cookie ）のサンプルを紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 入力内容を保存

　
画面で入力された内容を保存するクッキーを作成します。
クッキーに保存する内容を入力して クッキー保存ボタンをクリックしてみて下さい。
また、クッキー削除ボタンもクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
  let str  = "";
  str += "クッキーで保存されている内容 ： " + getCookie() + "<br>\n";
  document.getElementById("dat").innerHTML = str;	
});

function getCookie() {
  let cookieStr = document.cookie + ";";
  let startNum = cookieStr.indexOf("cookie_data");
  let txt = "";
  if (startNum != -1){
    let endNum = cookieStr.indexOf(";",startNum);
    txt = unescape(cookieStr.substring(startNum + "cookie_data".length + 1, endNum));
  }
  return txt;
}

function saveCookie() {
  //入力内容を取得
  let txt = document.getElementById("dat2").value;
  //日付データを作成
  let day = new Date();
  //クッキーの保存期間として5分後をセット
  day.setTime(day.getTime() + 60*5*1000);
  //入力内容と日付データをクッキーへ書き込む
  document.cookie = "cookie_data=" + escape(txt) + ";expires=" + day.toGMTString();
  //ページをリロード
  location.reload();
}

function delCookie()
{
  //日付データを作成
  let day = new Date();
  //過去の日付データ（1970年1月1日00:00:00）をセット
  day.setTime(0);
  //有効期限を過去に設定
  document.cookie = "cookie_data=;expires=" + day.toGMTString();
  //ページをリロード
  location.reload();
}
</script>

<div style="background-color : #CCC;">
  <div id="dat"></div><br>
  <input type="text" id="dat2" placeholder="クッキーに保存する内容を入力して下さい"><br>
  <input type="button" value="クッキー保存" onclick="saveCookie()"><br>
  <input type="button" value="クッキー削除" onclick="delCookie()">
</div>

　
document.cookie に保存する情報を格納します。
クッキーに保存された情報を呼び出す時のために、目印となる文字列（上のサンプルでは「 cookie_data= 」）と共に情報を書き込みます。

▲目次へ戻る

　

2. 訪問回数を表示

　
サイトを訪問した回数を表示するためのクッキーを作成します。
リロードボタンをクリックしてみて下さい。
クッキー削除ボタンをクリックするとカウントがリセットされます。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
  let str  = "";
  str += getCookie() + " 回目の訪問です！";
  document.getElementById("dat").innerHTML = str;	
});

function getCookie() {
  let cookieStr = document.cookie+";";
  let startNum = cookieStr.indexOf("cookie_count");
  num = 1;
  if (startNum != -1){
    let endNum = cookieStr.indexOf(";",startNum);
    num = unescape(cookieStr.substring(startNum + "cookie_count".length + 1, endNum));
  }
  return num;
}

function reload() {
  //カウントをインクリメント
  num++;
  //日付データを作成
  let day = new Date();
  //クッキーの保存期間として5分後をセット
  day.setTime(day.getTime() + 60*5*1000);
  //入力内容と日付データをクッキーへ書き込む
  document.cookie = "cookie_count=" + escape(num) + ";expires=" + day.toGMTString();
  //ページをリロード
  location.reload();
}

function delCookie()
{
  //日付データを作成
  let day = new Date();
  //過去の日付データ（1970年1月1日00:00:00）をセット
  day.setTime(0);
  //有効期限を過去に設定
  document.cookie = "cookie_count=;expires=" + day.toGMTString();
  //ページをリロード
  location.reload();
}
</script>

<div style="background-color : #CCC;">
  <div id="dat"></div><br>
　<input type="button" value="リロード" onclick="reload()"><br>
　<input type="button" value="クッキー削除" onclick="delCookie()"><br>
</div>

　
クッキーに保存された情報を呼び出す際に目印となる文字列（上のサンプルでは「 cookie_count= 」）と共に、訪問回数をdocument.cookie に書き込んでいます。
上のサンプルでは 便宜上リロードボタンをクリックした時に呼び出される reload関数に処理を定義していますが、通常は onload 時の処理として定義します。

▲目次へ戻る