How to remember last tab used after submit/refresh?

Question

I am using jQuery tab on my webpage but want it to remember the last tab used, after a form sumbit or when the user click on a link and then comming back to the tab page. How can i remember the last tab used after refresh of page, or navigating to another link. None of the examples i have found around the net work so far, I have this code so far:

<div id="content-container">
    <div id="page-content"> 
        <div class="row">   
            <div class="col-md-12">
                <div class="tab-base">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#demo-lft-tab-1">Tab1</a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#demo-lft-tab-2">Tab2</a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#demo-lft-tab-3">Tab3</a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#demo-lft-tab-4">Tab4</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="demo-lft-tab-1" class="tab-pane fade active in"></div>
                        <div id="demo-lft-tab-2" class="tab-pane fade"></div>
                        <div id="demo-lft-tab-3" class="tab-pane fade"></div>
                        <div id="demo-lft-tab-4" class="tab-pane fade"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>          
</div>          
<script>
    var lastTab = localStorage.getItem('lastTab');
    if (!lastTab) {
        lastTab = 0;
    }
    $(".tab-base").tabs({
        activate: function(event, ui) {
            //if another tab is activate, save it's index to the localStorage
            localStorage.setItem('lastTab', ui.newTab.index());
        },
        //set the corresponding tab to active
        active: lastTab
    });
</script>

Answer 1

CONCEPT: Store the data in a cookie and retrieve it on page load.

document.cookie = "tab=foo";

Full implementation example:

http://jsfiddle.net/sst9x2pd/

HTML:

<ul class="nav nav-tabs">
    <li><a class="addressClick" href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a class="addressClick" href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a class="addressClick" href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

JS:

 $('.nav-tabs a[href="'+getCookie('lastTab')+'"]').tab('show');


$(".addressClick").click(function () {
        var addressValue = $(this).attr("href");
    console.log(addressValue);
        setCookie('lastTab', addressValue, 100);
    });
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    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 "";
}

Answer 2

try this

$(function() {
            $( ".tab-base" ).tabs({
              activate:function(event,ui){

                localStorage.setItem("lastTab",ui.newTab.index() );
              },
              active: localStorage.getItem("lastTab") || 0
            });
         });

you can check here by select the tab and refresh the page. https://jsbin.com/