BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jquery.cookie.jsで訪問回数をカウントする
by 稲垣 稲垣

jquery.cookie.jsで訪問回数をカウントする

jquery.cookie.jsで訪問回数をカウントする

こんにちは稲垣です。
台風が過ぎて少し涼しくなりましたね。

今回はjQueryでcookieを保存し、訪問回数をカウントするページを作ってみました。
一昔前のサイトで使われていたのをちょこちょこ見かけた覚えがあります。

目次

デモ

htmlを用意する

動きの実装

まとめ

デモ

それでは完成イメージになります。

訪問回数をカウントするサンプル

ページを訪問した回数と、前回の訪問から何日経っているかを表示させています。
Cookieに保存しているので一度閉じてから開くと、前回の分に加算された回数が表示されます。

サンプルを作った際になんとも地味だったので、当時の雰囲気を出すために90年代後半のようなデザインを目指してみました。

加えて今年の福岡での初釣果であるアメフラシのイラストも置いてみました。賑やかになって満足です。

htmlを用意する

今回は無駄な装飾が多いので最低限必要な部分のみ抜き出しました。
CSSや画像は必要に応じてご自由にどうぞ。

ちなみにサンプルで目一杯使用しているtableタグは載せてません。

動きの実装

それではjavascriptの部分になります。

今回はCookieの保存や取得をjquery.cookie.jsで行うので、jQueryの後に忘れずに読み込ませてください。

また、ローカルでは動作しないので確認時はサーバーにアップするなどの手順を踏んで下さい。

jquery.cookie.jsのダウンロードはこちら

最初に今回必要な変数と関数を書き出します。

変数の値は実行時にCookieから読み込んだものを使うのでここでは宣言のみです。

Dateオブジェクトを使用して現在の時間を取得する関数です。
1970/01/01 00:00:00からの経過ミリ秒を取得するgetTime()を使用しました。

変数nの部分にnowTimeの様なタイムスタンプ型の変数を入れて使います。

courseに入る経過時間は1000ミリ秒の単位になっているので、最後の行で表示させたい単位に変換します。

Cookieに保存されている変数を指定して削除する関数です。
あとはページが読み込まれた時の実行処理を記述します。

まずCookieの中身を確認し、変数が空っぽなら初訪問時の処理を行い、それ以外の場合は2回目以降の処理を行います。

どちらの場合でも、処理の最後に$.cookie(‘変数’, ‘値’)を使って現在の値をCookieに保存しておきます。

訪問回数と経過時間を分けて書きましたが、一緒に書いた方がコードがすっきりしそうですね。。

まとめ

最後に全てのコードをまとめて載せます。

全体通して載せてみても結構短いですね。

…本当は育成ゲーム的なものを作ろうとしたのですが収集がつかなくなったため今回の様なサンプルになりました。

機会があれば完成させてアップできればと思います。
それではまた。

suisou

ページの先頭に戻る