How do i store recently submitted tab or refreshing tab using local storage

I created a custom tabs that work with javascript that allow me to select between tabs. But i am having trouble keeping the current tab open when submitting or refreshing the page. My javascript code only allows me to switch between tabs if i wanted to use local storage how would i be able to add that to my code.

---

<div class=" tab-pan row justify-content-center">
        <div class="col-md-8">
                <h1 class="" style="font-size:36px; color:#333; text-align:center; line-height: 1.25em; ">Sign In To Your Account!</h1>
            <ul class="tab-login">
                <li rel="vouchpanel3" class="active">Customer</li>
                <li rel="vouchpanel4">Merchant</li>
            </ul>
    <div id="vouchpanel3" class="pan active">

                <form method="POST" action="" style="margin-top:8%;">
                    @csrf

                    <div class="form-group row">

                        <div class="col-md-12">
                            <input id="email" style="height:4rem;font-size:16px;font-weight:400" type="email" class="form-control" name="email" value="" placeholder="Email" required autofocus>

                            @if ($errors->has('email'))
                                <span class="invalid-feedback">
                                    <strong></strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group row">
                        </label> --}}

                        <div class="col-md-12">
                            <input id="password" style="height:4rem; font-size:16px;font-weight:400" type="password" placeholder="Password" class="form-control" name="password" required>

                            @if ($errors->has('password'))
                                <span class="invalid-feedback">
                                    <strong></strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12">
                            <a class="btn btn-link" style="font-size:1.2rem; margin-left:-1%;" href="">
                                
                            </a>
                        </div>
                    </div>

                    <div class="form-group row mb-0">
                        <div class="col-md-12">
                            <button type="submit" class="loginandregister" style="width:100%; height:3rem; font-size:18px; padding:2px 0px 2px 0;">
                                Sign In
                            </button>


                        </div>
                    </div>
                </form>
            </div>

---

js

<script type="text/javascript">
// im in the class tab-panels > ul tab-vouch > grabing the li
$('.tab-pan .tab-login li').on('click', function(){

    var $panels = $(this).closest('.tab-pan');
    $panels.find('.tab-login li.active').removeClass('active');
    $(this).addClass('active');



    var loginpanelshow = $(this).attr('rel');

    $('.tab-pan .pan.active').stop().slideUp(300, function(){
        $(this).removeClass('active');

        $('#'+ loginpanelshow).slideDown(300, function(){
            $(this).addClass('active');
        });
    });
});

</script>

via Chebli Mohamed