Pure JS / localStorage Remember Tab States

JavaScript
1

Hello - I want to remember tab states if user refreshess page or leaves page and returns, I believe it is done with localStorage, although I can find loads of jQuery examples I’m struggling to find a Vanilla JS example, can anyonehelp with this please?:

<html>
<head>
<meta charset="utf-8">
<style>
.red {
	background: red;
	color: #fff;
}
</style>
</head>

<body>
<div class="container">
		<div class="bar blue">
				<button class="bar-item button tablink red" onclick="openTab(event,'Summary')">Summary</button>
				<button class="bar-item button tablink" onclick="openTab(event,'Finance')">Finance</button>
				<button class="bar-item button tablink" onclick="openTab(event,'Enquire')">Enquire</button>
				<button class="bar-item button tablink" onclick="openTab(event,'Save')">Save</button>
		</div>
		<div id="Summary" class="container border vehTab"> FIRST TAB </div>
		<div id="Finance" class="container border vehTab" style="display:none"> SECOND TAB </div>
		<div id="Enquire" class="container border vehTab" style="display:none"> THIRD TAB </div>
		<div id="Save" class="container border vehTab" style="display:none"> FOURTH TAB </div>
</div>
<script>
function openTab(evt, tabName) {
	var i, x, tablinks;
	x = document.getElementsByClassName("vehTab");
	for (i = 0; i < x.length; i++) {
		x[i].style.display = "none";
	}
	tablinks = document.getElementsByClassName("tablink");
	for (i = 0; i < x.length; i++) {
		tablinks[i].className = tablinks[i].className.replace("red", "");
	}
	document.getElementById(tabName).style.display = "block";
	evt.currentTarget.className += " red";
}
</script>
</body>
</html>
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.