’21/4/7 Web上で動作するJavaScriptカウントダウンタイマを作りました

表示した瞬間から指定日までのカウントダウンタイマ作りたいんですけどやってもらうことできますか?
JavaScriptである程度作ったもののページ更新したり再起動するとタイマがリセットされてしまいます…
あとカウントが0になったら別ページに飛ばしてほしいです。

ある日、このようなダイレクトメッセージをいただきました。
この時点でソースコードは送られてきていなかったのですが、
ページの再読み込み時に変数が初期化されることでリセットされることの説明と、対策としてCookieによる値の保存を提案させていただきました。
そしてソースコードを見せていただき、問題なく対応可能見込みとなりましたので契約成立。

コードの修正とCookieの追加をさせていただきました。ご指名いただきありがとうございます、嬉しかったです。

制作したのがこちら。3日間のカウントダウンタイマです。


試しにブラウザを閉じて、もう一度このページを見てみてください。
タイマはリセットされずに時間が経過したまま(正確には閉じてページ再読込の間もカウント)のはずです。
これはパソコンにデータを保持させておき、ページを開いたときに参照するようにしているためです。

カウント終了時刻を保存、取得(Local Storage / Cookie)

このページを初めて開いた瞬間にカウントダウン終了の指定時刻を保存させておき、
1秒おきに現在時刻をDate関数で取得して、保存した値との差分を計算してタイマに表示させています。

値の保存にはLocal Storageを用いました。
当初Cookieで試みたのですが、近くCookieを廃止しようとGoogleが躍起になっていると耳にしたので
Local Storageの採用に至りました。
Local StorageはCookieに似ていますが、取り扱いが非常に楽!
明示的に削除しない限りデータが消えることもなく、さらにサーバとの通信を必要としないことから情報漏洩等にも強い利点があります。

Cookieについて

Cookieへの書き込みは下記のように書きます。
document.cookie = “test=10”;

document.cookieに対して保存するときの形式は”key=value”として、宣言したkeyに対してvalueを格納する、の意味合いです。

cookieには保持期限があって、期限についてはexpiresで設定することが可能です。
document.cookie = “test=10″;”expires=GMTString”;

このとき、期限の指定はグリニッジ標準時間にしなければならないことに注意します。
簡単に行うにはDateで現時点の時刻を取得して、指定時間分足しこみます。
ミリ秒単位なので、例えば1日だと24(h)*60(m)*60(s)*1000(s→ms)となりますね。

Cookieの取得については、キーを検索して、そこから指定文字分(よく;前までとされる)抜き出して変数に格納するのですが、
説明すると長くなるので改めて説明できればと思います…説明するよりコード見た方が早いので載せときます。
Cookieの取得は文字列になるので、最後にDate型に変換してます。

var cook; //cookieデータを格納する変数
var cStart2,cEnd2; //訪問回数部分を切取る為の位置を格納
var endtime; //経過時間を格納

cook=document.cookie + “;”; //変数cookにcookieデータを入れる
cEnd2 = cook.indexOf(“;”, cStart2); //カウントデータの最後の部分「;」の位置を取得
endtime = cook.substring(cStart2 + 5, cEnd2); //数値の部分だけを切り取る
endtime = Date.parse(endtime);

Local Storageについて

Local Storageへの書き込みは下記のように書きます。
localStorage.setItem(‘test’, 10);

書き込みに関してはCookieと似ていますね。キーと値を入れるだけです。
Local Storageが便利なのは読み出しの時になります。
変数に対してキーを指定してgetItemを書きます、下記のように。

num = localStorage.getItem(“test”);

これだけです、とっても便利!
cookieの時は文字列を検索して抜き出すことをしなければなりませんでしたが、
キーを指定するだけで抜き出せるなんて便利すぎます!
明示的に消さない限り、残り続けるのも管理が楽ですね(大変ともいえる)。

Local Storageの有効範囲

LocalStoraegは同一ドメイン内が有効範囲となります。
このサイトで言えば、tatepro.comドメイン下のすべてのページに適用されます。

カウント終了後に別ページに飛ばす

別ページに飛ばすのは、下記のようになります。
function(){window.location.href = ‘https://www.yahoo.co.jp/’;}

hrefで遷移先URLを指定することで、そこに飛びます。

例えばボタンで飛ぶ場合は直ちに実行してよいですが、
タイマ動作の場合は多少のバッファを設けてやるとユーザーには親切な動作になりますね。
setTimeout関数で、[処理,実行までの待機時間]を引数にします。

setTimeout(function(){window.location.href = ‘https://www.yahoo.co.jp/’;}, 5*1000);

これだと5秒後にヤフーに飛ばす、ということになりますね。

まとめ

・3日間のカウントダウンタイマを作成しました
・カウントダウン時刻の保存はLocalStorageを用いました。
 Cookieでもよかったのですが、LocalStorageの方が扱いやすいので採用
・カウントダウン後には指定URLに自動遷移させています