pos lock on / off page refresh issue time reset

Question

I am working on POS. And I need to achieve lock on/off. Issue When lock is on for any number of seconds then During timing counter if user refresh page then timing counter get reset. No matter how many time a user refresh the page time get update/reset.

Please suggest any possible solution regarding page refresh.Thanks

My complete code is below

    $(document).ready(function () {
    //-------------------- pos inactivity code section ----------------------------------
    // Get local storage.
    local_pos_storage = window.localStorage;

    // by default lock is 'on' so set lock key to on.
    if (local_pos_storage.getItem("lock") === null) { // if lock is not set.
        local_pos_storage.setItem('lock', 'off'); // default turn off lock.
    } else if (local_pos_storage.getItem("lock") === "on") {
        // alert("lock is on ");
        // pos pin show model.
        // $("#pos_pin_modal").modal({backdrop: 'static', keyboard: false, show: true});
    }

    // set button text based.
    if (local_pos_storage.getItem('lock') == "on") { // if lock is on.
        $('#lock_text').html("Lock On");
    } else if (local_pos_storage.getItem('lock') == "off") { // if lock is off.
        $('#lock_text').html("Lock Off");
    }
    var idleInterval;

    // anonymous function to check inactivities.
    let inactive = function () { // Increment the idle time counter every minute.

        clearInterval(idleInterval);
        idleInterval = setInterval(function () {

            if (local_pos_storage.getItem('lock') == "on") {
                console.log(idleTime);

                idleTime = idleTime + 1;
                if (idleTime > pos_inactive_time) {

                    // clear interval when pop-up.
                    clearInterval(idleInterval);
                    idleTime = 0;

                    // hide error and success messages before model opens.
                    $(".pos-pin-error").hide();
                    $(".pos-pin-success").hide();
                    $("#pos-pin").val('');

                    // pos pin show model.
                    $("#pos_pin_modal").modal({backdrop: 'static', keyboard: false, show: true});
                }
            }
        }, 1000);

        // Zero the idle timer on mouse movement.
        $(this).mousemove(function (e) {
            idleTime = 0;
        });
        $(this).keypress(function (e) {
            idleTime = 0;
        });
    };

    //-------------------- pos pin verification ----------------------------------
    var idleTime = 0; // set default idle time.
    var pos_inactive_time = parseInt('{{ get_pos_inactive_time() }}'); // get pos inactive time.
    $(document).ready(function () {

        // default inactive method call.
        // inactive();

        // pos pin model 'access' button clicked
        // $(document).on("click","#verify-pos-pin-btn",function(event) {
        // $(document).on("keyup change click", "#pos-pin", function (event) {

        //setup before functions
        var typingTimer;                //timer identifier
        var doneTypingInterval = 2000;  //time in ms, 5 seconds for example
        var $input = $('#pos-pin');

        //on keyup, start the countdown
        $input.on('keyup', function () {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
        });

        //on keydown, clear the countdown
        $input.on('keydown', function () {
            clearTimeout(typingTimer);
        });

        //user is "finished typing," do something
        function doneTyping() {

            // $(document).on("keyup change", "#pos-pin", function (event) {

            // get pos pin value.
            let pos_pin = $('#pos-pin').val()

            // pos pin validation.
            if (pos_pin == null || pos_pin == "" || pos_pin.length < 4) { // min dights 4

                // $(".pos-pin-error").show();
                // $(".pos-pin-error").html("Pos Pin is required.");

            } else {

                // pos pin verification.
                $.ajax({
                    type: "POST",
                    url: "{{ route('pos.verify.pos.pin') }}",
                    data: {
                        '_token': "{{ csrf_token() }}",
                        'pos_pin': pos_pin
                    },
                    cache: false,
                    success: function (data) {

                        if (data.success == "2") // error
                        {
                            // $(".pos-pin-success").hide();
                            // $(".pos-pin-error").html(data.message);
                            // $(".pos-pin-error").show();

                        } else if (data.success == "1") { // success

                            if (local_pos_storage.getItem("switch") === "yes") {
                                pos_pin_turn_on_off();
                                // alert("switch = yes ");
                                localStorage.removeItem("switch");
                            }
                            
                            $("#pos_pin_modal").modal('hide'); // hide model.

                            // activate.
                            inactive();
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $(".pos-pin-success").hide();
                        $(".pos-pin-error").html("Something went wrong!");
                        $(".pos-pin-error").show();

                        console.log(JSON.stringify(jqXHR));
                        console.log("AJAX error aaa: " + textStatus + ' : ' + errorThrown);
                    }
                });
            }
        }
    });

    //---------------------------------------------------------- POS-PIN NUMPAD
    // only allow 0 to 9 digits only.
    $('#pos-pin').keyup(function (e) {
        this.value = this.value.replace(/[^0-9\.]/g, '');
    });

    // pos pin keypad numbers get clicked.
    $(".pos-pin-keypad").click(function (event) {
        event.preventDefault();
        event.stopPropagation();

        let value = $(this).attr("data-value");
        let old_pos_pin = "";
        if (value === "c") { // clear input.
            $('#pos-pin').val(""); // clear pos pin input.
        } else {
            old_pos_pin = $('#pos-pin').val(); // get old pos pin input value.
            $('#pos-pin').val(old_pos_pin + value); // append old pos pin input value.
            $('#pos-pin').trigger('change');
        }
    });
    //---------------------------------------------------------- POS On/Off press for 2 seconds.
    var longpress = 2000;
    var start_longpress;
    var timer_longpress;
    $("#lock_btn").on('mousedown', function (e) {
        e.stopPropagation();
        e.preventDefault();

        start_longpress = new Date().getTime();
        timer_longpress = setTimeout(function () {
            console.log('long press!');
            pos_pin_turn_on_off();
        }, longpress);

    }).on('mouseleave', function (e) {
        start_longpress = 0;
        clearTimeout(timer_longpress);
    }).on('mouseup', function (e) {
        if (new Date().getTime() < (start_longpress + longpress)) {
            clearTimeout(timer_longpress);
            console.log('breafly press!');

            if (local_pos_storage.getItem("switch") === null)
            {
                local_pos_storage.setItem('switch', 'yes');
            }

            $('#pos-pin').val(""); // clear pos pin input.
            $("#pos_pin_modal").modal({backdrop: 'static', keyboard: false, show: true});
        }
    });

    function pos_pin_turn_on_off() {
        // alert("pos_pin_turn_on_off");
        // reset idletime when lock button pressed.
        idleTime = 0;

        let lock = $('#lock_text').text();
        if (lock == "Lock On") // turned off functionalotiy.
        {
            $('#lock_text').text('Lock Off');
            local_pos_storage.setItem("lock", 'off');
            inactive();
        } else { // turn on diable functionality.
            $('#lock_text').text('Lock On');
            local_pos_storage.setItem('lock', 'on');
            inactive();
        }
    }

}); // document ready