How to stay on selected tab

Question

i know there are a lot themes about that, but i dont know why, noone of them are working

I am using AdminLTE3, i have tabs, i want to stay on selected tab after refresh

my code (not working, but should work):

@extends('adminlte::page')
@section('title', 'Mans Profils')
@section('content_header')
@stop
@section('content')

    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
            <li><a href="#about" data-toggle="tab">About</a></li>
            <li><a href="#contacts" data-toggle="tab">Contacts</a></li>
        </ul>
    </div>

    <div class="tab-content">
        <div class="tab-pane active" id="home">Home</div>
        <div class="tab-pane" id="about">About</div>
        <div class="tab-pane" id="contacts">Contacts</div>
    </div>

@stop
@section('css')

@stop
@section('js')
    <script>
        $(function() {

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                localStorage.setItem('lastTab', $(this).attr('href'));
            });
            var lastTab = localStorage.getItem('lastTab');

            if (lastTab) {
                $('[href="' + lastTab + '"]').tab('show');
            }

        });
    </script>
@stop

Answer 1

No need to use localsStorage for that sake. just put condition over window.location.search

1. whichever tab has been clicked append window.location.search with that tab variable .
2. on reload check whether window.location.search string contains your tab variable then call the same code which is inside your tab click.