Как реализовать необновленный и продолжительный таймер для теста в asp. net mvc?

Question

Я пытаюсь сделать таймер для моего теста в asp. net mvc, но проблема в том, что, когда я обновляю sh страницу или перехожу к следующему вопросу, таймер сбрасывается снова или запускается с раньше времени. Я надеюсь, вы поможете мне, чтобы при переходе от одного вопроса к другому таймер продолжался, даже когда я обновляю sh страницу.

Вот код того, что я пробовал.

@model IEnumerable<dbTest.Models.TestContentVM>
@using PagedList
@using PagedList.Mvc
@{
    ViewBag.Title = "Index";
}
<link href="~/Content/PagedList.css" rel="stylesheet" />
<div class="container" style="margin-top:30px">
    <div class="row">
        <div class="col-md-2 text-center text-danger" style="margin-top:170px;font-size:20px">
            Time remaining <br />
            <div id="timer">00:00:00</div>
            <span id="minRemaining" style="font-size:30px"></span> :
            <span id="secRemaining" style="font-size:30px"></span>
        </div>
        <div class="col-md-7">
            @*@using (Html.BeginForm("SetAnswer", "Test", FormMethod.Post, new { @id = "myForm" }))*@
            @foreach (var item in Model.OrderBy(x=>x.QId))
            {
                <div class="panel panel-default">
                    <div class="panel-heading">

                        @if (((IPagedList)Model).PageCount > 0)
                        {
                            var x = ((IPagedList)Model);
                            <p>Question#:@x.PageNumber of #@x.PageCount</p>
                        }
                    </div>
                    <div class="panel-body">
                        <p>@item.QTitle</p>
                        <br />
                        <div class="form-group input-group">
                            <span class="input-group-addon">A @Html.RadioButton("UserAnswer", item.OptionA, new { @class = "rad1" })</span>
                            <p class="form-control" onclick="$('.rad1').click();">@item.OptionA</p>
                        </div>

                        <div class="form-group input-group">
                            <span class="input-group-addon">B @Html.RadioButton("UserAnswer", item.OptionB, new { @class = "rad2" })</span>
                            <p class="form-control" onclick="$('.rad2').click();">@item.OptionB</p>
                        </div>

                        <div class="form-group input-group">
                            <span class="input-group-addon">C @Html.RadioButton("UserAnswer", item.OptionC, new { @class = "rad3" })</span>
                            <p class="form-control" onclick="$('.rad3').click();">@item.OptionC</p>
                        </div>

                        <div class="form-group input-group">
                            <span class="input-group-addon">D @Html.RadioButton("UserAnswer", item.OptionD, new { @class = "rad4" })</span>
                            <p class="form-control" onclick="$('.rad4').click();">@item.OptionD</p>
                        </div>
                    </div>
                    <div class="panel-footer">
                        @*<input type="submit" value="Next" class="btn btn-primary" />*@
                        @if (((IPagedList)Model).PageCount > 0)
                        {
                            var nextText = "Next";
                            //var nextStyle = "block";
                            //var resultStyle = "none";
                            <div>
                                @{ var x = ((IPagedList)Model);}
                                @if (x.IsLastPage)
                                {
                                    nextText = "Get Result";
                                    //nextStyle = "none";
                                    //resultStyle = "block";
                    }
                                <ul class="pager">
                                    <li class="next" style="display:none" id="next"><a href="@Url.Action("Index","Test2", new { pageNo = x.PageNumber + 1 })">@nextText</a></li>
                                    @*<li class="next" style="display:@resultStyle"><a href="#">Get Result</a></li>*@
                                </ul>
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
    </div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>

    var timeoutHandle;
    function countdown(minutes, stat) {
        var seconds = 60;
        var mins = minutes;

        if (getCookie("minutes") && getCookie("seconds") && stat) {
            var seconds = getCookie("seconds");
            var mins = getCookie("minutes");
        }

        function tick() {

            var counter = document.getElementById("timer");
            setCookie("minutes", mins, 10)
            setCookie("seconds", seconds, 10)
            var current_minutes = mins - 1
            seconds--;
            counter.innerHTML =
            current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
            //save the time in cookie

            if (seconds > 0) {
                timeoutHandle = setTimeout(tick, 1000);
            } else {

                if (mins > 1) {
                    setTimeout(function () { countdown(parseInt(mins) - 1, false); }, 1000);

                }
                else {
                    alert('done');
                }
            }
        }
        tick();
    }
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    window.onload = function startingTimer() {
        //countdown(prompt("Enter how many minutes you want to count down:"),true);
        countdown(1, true);
    }

</script>