表示した瞬間から指定日までのカウントダウンタイマ作りたいです
JavaScriptで作りましたがページ更新したり再起動するとタイマがリセットされます…
あとカウントが0になったら別ページに飛ばしてほしいです。
このような依頼をいただき、LocalStorageを用いた処理を提案しました。
この動作で問題ないということで、既存コードに処理を追加をさせていただきました。
制作した3日間のカウントダウンタイマ（※0になって別ページに飛ばす処理は未実装）
↓
試しに下に設けたボタンでページをリロードするか、ブラウザを閉じてもう一度このページを見てみてください。
タイマはリセットされずに時間が経過したままのはずです。
プログラムソースコード提供中！
本ブログ記事のプログラムソースコードは下記にて提供しています。
HTML/CSS/JavaScriptの学習用にどうぞ。
提供しているプログラムには3日後にページ自動遷移する処理も入っています。
改造依頼のメールをいただき、機能追加版も提供はじめました。
カウント終了時刻を保存、取得（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”);
これだけです、とっても便利！
明示的に消さない限り、残り続けるのも管理が楽ですね（大変ともいえる）。
Local Storageの有効範囲
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://www.yahoo.co.jp/’;}
hrefで遷移先ＵＲＬを指定することで、そこに飛びます。
例えばボタンで飛ぶ場合は直ちに実行してよいですが、
タイマ動作の場合は多少の待機時間を設けるとユーザーには親切な動作になりますね。
この場合、setTimeout関数で、[処理,実行までの待機時間]を引数にします。
setTimeout(function(){window.location.href = ‘https://www.yahoo.co.jp/’;}, 5*1000);
5秒後にヤフーに飛ばす、ということになりますね。
依頼いただければ作りますよ！
読んだけどよく分からない、こういう風に作ってほしいなどあればメッセージくださいませ。
確認のうえ、返信いたします！
フロントエンド系言語のスキルアップしたい方向け
もしプログラミング言語の独学が難しいと感じたり、もっと実践的なことを体系的に勉強したいとお考えでしたらWeb食いオンラインスクールがオススメです。
月額費用10,800円で、大手と比べてコスパ良いのが特長です。それでいて、大手と同じくいつでも何度でも講師に質問できる整った環境で学べます。
生徒数を限定しているので、こうしたサービスが可能になってます。興味があれば早めに問い合わせてみてください。
優秀な生徒には実際の企業案件を依頼するようで、その対価はちゃんともらえます。
学習しながら実務もこなせるので自信がつきますよ！
まとめ
・3日間のカウントダウンタイマを作成しました
・カウントダウン時刻の保存はLocalStorageを用いました。
Cookieでもよかったのですが、LocalStorageの方が扱いやすいので採用