
プログラミング
2023.01.30
ITコラム
2018.01.31
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 時の処理として定義します。
プログラミング
2023.01.30
プログラミング
2023.01.24
転職ノウハウ
2023.01.23
転職ノウハウ
2023.01.20
転職ノウハウ
2023.01.16
インタビュー
2023.01.13
INTERNOUS,inc. All rights reserved.