Keep The Last Active Tab Bootstrap After Refreshing

Has already been described briefly by the title :)

by Winson Sasongko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
<div class="affectedDiv">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#sectionA">Sakatonik A</a></li>
        <li><a data-toggle="tab" href="#sectionB">Sakatonik B</a></li>
        <li><a data-toggle="tab" href="#sectionC">Sakatonik C</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
            <h3>Section A</h3>
            <p>Aku anak indonesia, tubuhku kuat, karena mama memberiku sakatonik abc. bukan baterai abc</p>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <h3>Section B</h3>
            <p>Aku anak indonesia, tubuhku kuat, karena mama memberiku sakatonik abc. bukan baterai abc</p>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <h3>Section C</h3>
            <p>Aku anak indonesia, tubuhku kuat, karena mama memberiku sakatonik abc. bukan baterai abc</p>
        </div>
    </div>
</div>
</body>
</html>

CSS

.affectedDiv{
		margin: 20px;
	}

JavaScript

$(document).ready(function(){
	$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
		localStorage.setItem('activeTab', $(e.target).attr('href'));
	});
	var activeTab = localStorage.getItem('activeTab');
	if(activeTab){
		$('#myTab a[href="' + activeTab + '"]').tab('show');
	}
});