表示した瞬間から指定日までのカウントダウンタイマ作りたいです
JavaScriptで作りましたがページ更新したり再起動するとタイマがリセットされます…
あとカウントが0になったら別ページに飛ばしてほしいです。
このような依頼をいただき、LocalStorageを用いた処理を提案しました。
この動作で問題ないということで、既存HTMLコードに処理を追加をさせていただきました。
制作した3日間のカウントダウンタイマはこちら（※0になって別ページに飛ばす処理は未実装）
↓
試しに下に設けたボタンでページをリロードするか、ブラウザを閉じてもう一度このページを見てみてください。
タイマはリセットされずに時間が経過したままのはずです。
プログラムソースコード提供中！
本ブログ記事のプログラムソースコードは下記にて提供しています。
HTML/CSS/JavaScriptの学習用にどうぞ。
提供しているプログラムには3日後にページ自動遷移する処理も入っています。
改造依頼のメールをいただき、機能追加版も提供はじめました。
自分で勉強するならこちらをどうぞ
ステップアップJavaScript フロントエンド開発の初級から中級へ進むために
カウント終了時刻を保存、取得（Local Storage / Cookie)
このページを初めて開いた瞬間にカウントダウン終了の指定時刻を保存させておき、1秒おきに現在時刻をDate関数で取得して、保存した値との差分を計算してタイマに表示させています。
値の保存にはLocal Storageを用いました。
当初Cookieで試みたのですが、近くCookieを廃止しようとGoogleが躍起になっていると耳にしたのでLocal Storageの採用に至りました。
前置きが長くなりました、話を進めましょう。
Local Storage
Local StorageはCookieに似ていますが、取り扱いが非常に楽！
明示的に削除しない限りデータが消えることもなく、さらにサーバとの通信を必要としないことから情報漏洩等にも強い利点があります。
書込み
Local Storageへの書き込みは下記のように書きます。
localStorage.setItem('test', 10);書き込みはCookieと似ていますね。キーと値を入れるだけです。
読出し
Local Storageが便利なのは読み出しの時で、変数に対してキーを指定してgetItemを書きます。
num = localStorage.getItem("test");これだけです、とっても便利！
明示的に消さない限り、残り続けるのも管理が楽ですね（大変ともいえる）。
データ有効範囲
LocalStoraegは同一ドメイン内が有効範囲です。
このサイトで言えば、tatepro.comドメイン下のすべてのページに適用されます。
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); カウント終了後に別ページに飛ばす
別ページに飛ばすのは、下記のようになります。
function(){window.location.href = "https://tatepro.com/";}hrefで遷移先ＵＲＬを指定することで、そこに飛びます。
例えばボタンで飛ぶ場合は直ちに実行してよいですが、タイマ動作の場合は多少の待機時間を設けるとユーザーには親切な動作になりますね。
この場合、setTimeout関数で、[処理,実行までの待機時間]を引数にします。
setTimeout(function(){window.location.href = "https://tatepro.com/";}, 5000);5秒後にヤフーに飛ばす、ということになりますね。
まとめ
・3日間のカウントダウンタイマを作成しました
・カウントダウン時刻の保存はLocalStorageを用いました。
Cookieでもよかったのですが、LocalStorageの方が扱いやすいので採用
今回紹介したプログラムソースコードを提供しています。
読んだけどよく分からない、こういう風に作ってほしいなどあれば以下のフォームからメッセージくださいませ。
確認のうえ、返信いたします！
