hide div using javascript even though documents gets reloaded

Question

Actually, I am working with ajax to display the dynamic elements. I am setting up aa div on a button click using javascript , this div contains form elements, after this form gets submitted i need to hide this div, so that it's no longer seen on UI .

The problem I am facing is, once I hide the div, its working fine, but when I reload the page the div is occurring again.

The wanted to make the div hidden permanently once I click on the button.

Answer 1

You will need to store the state of the div being hidden inside of localStorage .

Example:

const divHidden = localStorage.getItem('divHidden') === 'yes';

// if (!divHidden) show div

// Then when the div is being hidden:

localStorage.setItem('divHidden', 'yes');

You can also listen for the storage event on window to update any other tabs of your web application:

window.addEventListener('storage', () => {
  if (localStorage.getItem('divHidden') === 'yes') {
    // ...
  }
});