ページをリロードしてもリセットせず経過時間を表示させ続けたい

Question

前提・実現したいこと。

Ruby on rails5で経過時間をビューに表示させるためにjsファイルを用いて経過時間を表示させました。

しかしページを更新（リロード）するとタイマーがリセットされてしまいます。

経過時間をリセットさせずに表示し続けたいです。

index.html.haml(経過時間を表示するビューです)

%input{type: 'button', value: 'スタート', onclick: 'startShowing();'}
      %form{action: '#', name: 'form1'}
        %input{type: 'text', name: 'field1', size: '4'}日
        %input{type: 'text', name: 'field2', size: '2'}時間
        %input{type: 'text', name: 'field3', size: '2'}分
        %input{type: 'text', name: 'field4', size: '2'}秒
　　   

timer.js

var start = new Date();

// 初期化
var day = 0;
var hour = 0;
var min = 0;
var sec = 0;
var now = 0;
var datet = 0;

function startShowing(){

	now = new Date();

  datet = parseInt((now.getTime() - start.getTime()) / 1000);

  day = parseInt(datet / 86400);
	hour = parseInt(datet / 3600);
	min = parseInt((datet / 60) % 60);
	sec = datet % 60;

	// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
	if(hour < 10) { hour = "0" + hour; }
	if(min < 10) { min = "0" + min; }
	if(sec < 10) { sec = "0" + sec; }

  // テキストフィールドにデータを渡す処理
  document.form1.field1.value = day;
	document.form1.field2.value = hour;
	document.form1.field3.value = min;
	document.form1.field4.value = sec;

	setTimeout("startShowing()", 1000);

}

Answer 1

ページをリロードするということは、timer.js も読み込み直しますから、当然変数から何から全部リセットされます。
ですのでそれを回避したければ、「リロードしてもデータが初期化されないところにスタート時間を記録する」必要があります。

具体的には Web storage、あるいは Cookie や セッション情報といったあたりになるでしょうか。

Comments

[Homaresan]

回答ありがとうございます！
local storageでスタート時間を記録する事はできました。
ですがページを更新すると経過時間が表示されずスタートボタンをまた押さないと表示されないみたいです。
どのように解決すれば良いでしょうか。

[tacsheaven]

それは「ページをロードし終わったとき」に、スタートボタンを押したのと同じ処理をして（ただし記録されている場合は初期化しない）、経過時間を表示するようにすればよいのでは？

[Homaresan]

なるほど！とても参考になりました！ありがとうございます。