How can I store and load the same piece of code for multiple pages?

Question

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:

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.
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:

index.html

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;
  flex-direction:
}

#new_div {
  width: 50%;
  height: 100%;
  background-color: yellow;
  border-right: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main_container">
  <div id="bar">

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

Rounin · Accepted Answer · 2020-12-04T22:26:21.643

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() {

  // OTHER CODE

  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.id = 'tab1Div';

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

  // Add Tab Link to Tab
  tab1Div.appendChild(tab1Link);
  
  // Add Tab to DOM
  myBar.appendChild(tab1Div);
}

Further Reading:

Using the Web Storage API by MDN

How can I store and load the same piece of code for multiple pages?

1 Answers1