ITコラム

JavaScript

2018.01.31

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

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

１．入力内容を保存

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

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

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

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

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

function delCookie()
{
  //日付データを作成
  var 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= 」）と共に情報を書き込みます。

▲目次へ戻る

２．訪問回数を表示

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

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

<script type="text/javascript">
<!--
window.onload　=　function() {
  var str  = "";
  str += getCookie() + " 回目の訪問です！";
  document.getElementById("dat").innerHTML = str;	
}

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

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

function delCookie()
{
  //日付データを作成
  var 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 時の処理として定義します。

▲目次へ戻る