Solution 1 :

There are several approaches which enable you to persist data and / or state between pages on your website, which include:

  • Cookies (Old school. Can be read on the client-side or on the server-side)
  • the Query String (a ? followed by keys and values at the end of the URL)
  • the Hash Fragment (a # followed by a string at the end of the URL)

But probably the cleanest and most straightforward approach is:

  • WebStorage (which includes two variants: localStorage and sessionStorage)

Given the setup you describe above, you might have each key-value entry in your localStorage describe a tab and a URL:

'Tab1' | '/tab1.html'
'Tab2' | '/tab2.html'
'Tab4' | '/tab4.html'

This means that when a user clicks on a Tab 1 button:

// Grab tab1Button in DOM
const tab1Button = document.getElementById('tab1Button');

// Reusable function to create tabs
function createTab() {


  localStorage.setItem('Tab1', '/tab1.html');

// Event Listener which activates function when user clicks corresponding button
tab1Button.addEventListener('click', createTab, false);

Then, on page load, Javascript will be able to interrogate the localStorage like this:

const myBar = document.getElementById('bar');

// Check 'Tab1' Entry exists
if (localStorage.get('Tab1') !== null) {

  // Create Tab
  const tab1Div = document.createElement('div'); = 'tab1Div';

  // Create Tab Link
  const tab1Link = document.createElement('a');
  tab1Link.setAttribute('href', localStorage.get('Tab1'));
  tab1Link.textContent = 'Redirect';

  // Add Tab Link to Tab
  // Add Tab to DOM

Further Reading:

Problem :

So, I am working on a ‘tab’ system. So, whenever I click on the button, a new tab is added.

Each of the tabs should redirect to a new website, tab1 redirects to tab1.html, tab2 redirects to tab2.html and so on.

My issues are:

  1. If there are 3 tabs ‘active’ they should remain active and they should be displayed even if I switch pages. I should be able to see the same tab-bar in all pages.

  2. Each tab needs to redirect to a new website. I’m not entirely sure how to place a variable in this piece of code so the link dynamically changes.

$("#bar").append("<div id='new_div'><a href='$test'>Redirect</a></div>");

This is my code so far:


I have researched on my own about this but nothing seems to adapt to my needs. Any help will be highly appreciated.

$(document).ready(function() {
  $("#button").click(function() {
    $("#bar").append("<div id='new_div'><a href='$test'>Redirect</a></div>");
#main_container {
  width: 100%;
  height: 100vh;

#bar {
  width: 100%;
  height: 5%;
  background-color: blue;
  display: flex;

#new_div {
  width: 50%;
  height: 100%;
  background-color: yellow;
  border-right: 1px solid black;
<script src=""></script>
<div id="main_container">
  <div id="bar">

  <input type="button" id="button" value="Click me">