Session time Countdown

Question

I have MVC Core application in which each user has aspecified Session time. When a User login to the application the Session time count down counter starts and decrement time when the Session time reach to zero hour, zero minute, zero second then the application automatically sign out. I used the Timer control that calls a function after each second and the counter of seconds decremented. It is working perfectly and when the counter reach to zero the application sign out but the problem is that when a user login to the application and the counter starts then it works only when a user is in the Index View and when a user navigate to the menu and go to another View and then come back to the Main Index View the counter again starts from the begining suppose if a user login to the application and the counter starts from two hours Session time that is 2:00:00 and after some time if the user open another View from the application menu and then again come to the main View then the application do not maintain the counter but the counter again starts from two ours that is 2:00:00. I want such a counter that always keeps the time like static variable and even if a user go to another view from the application menu and then come back to the main menu the counter should not refresh but it should maintain the Session time. I used the timer and count down code in the _Layout.cshtm View. Following is my code:

<script type="text/javascript">
@*Retrieve the seconds, minutes, and hours values from the Session which we have set in the Controller*@
var seconds = @HttpContextAccessor.HttpContext.Session.GetString("SessionSeconds");
var minutes = @HttpContextAccessor.HttpContext.Session.GetString("SessionMinutes");
var hours = @HttpContextAccessor.HttpContext.Session.GetString("SessionHours");
@*Store the seconds, minutes, and hours in the sessionStorage locally in client side*@
sessionStorage.SessionSeconds = seconds;
sessionStorage.SessionMinutes = minutes;
sessionStorage.SessionHours = hours;
var ts;
function CountDownSessionTime() {
if (Number(sessionStorage.SessionSeconds) > 0) {
sessionStorage.SessionSeconds = Number(sessionStorage.SessionSeconds) - 1;
}
else
if (Number(sessionStorage.SessionSeconds) == 0) {
sessionStorage.SessionSeconds = 60;
sessionStorage.SessionMinutes = Number(sessionStorage.SessionMinutes) - 1;
}
if (Number(sessionStorage.SessionMinutes) == 0 && Number(sessionStorage.SessionHours) > 0) {
sessionStorage.SessionHours = Number(sessionStorage.SessionHours) - 1;
minutes = 60;
}
document.getElementById("txtShowTime").innerHTML = Number(sessionStorage.SessionHours) + " : " + Number(sessionStorage.SessionMinutes) + " : " + Number(sessionStorage.SessionSeconds);
ts = setTimeout("CountDownSessionTime()", 1000);
if (Number(sessionStorage.SessionHours) == 0 && Number(sessionStorage.SessionMinutes) == 0 && Number(sessionStorage.SessionSeconds) == 0) {
clearTimeout(ts);
window.location.href = "@Url.Action("Login","Login")";
}
}
window.onload = CountDownSessionTime;
</script>

I am displaying the Session time in the Footer section of the View. Following is my Code:

<footer class="border-top footer text-muted">
<div class="container">
<label id="txtShowTime"></label>
</div>
</footer>

Please give me an idea when the counter down operation starts and during this session a user navigate the application different views but the counter should not start from the begining but it should maintain the session time. Thanks