As mentioned above you need to use localStorage to solve your problem.

• Need to know when page is loaded
• Get value from the localStorage
• Add event to the button (i removed the onclick event from the html for a cleaner solution)
• After click set value for localStorage and hide item
• If localStorage have value, hide the element

working example

Javascript

document.addEventListener('DOMContentLoaded', function () {
  const topDiv = document.querySelector('.topDIV');
  const buttonX = document.querySelector('.button-x');

  // Get value from localStorage when open the page
  const lS = localStorage.getItem('first-visit');

  // Add button 'click' event
  buttonX.addEventListener('click', () => {
    // Set value to the localStorage
    localStorage.setItem('first-visit', false);
    // hide DOM element
    topDiv.style.display = 'none';
  });

  // This does not check on the first visit to the page
  // If localStorage have value, hide DOM element
  if (lS) topDiv.style.display = 'none';
});

Html

<span class="topDIV"
  >Welcome to <em>Vitrify</em>.Following in the finest traditions of
  vitreous enamelled jewellery.
  <a href="#">Find out more.</a>
</span>
<button class="button-x"></button>

You can add a flag "showTopMessage:true" in your local storage or session storage based on one time msg to user or every time he visits. respectively.

On Cross/close icon click set the flag "showTopMessage:false".

       const showTopBar = "SHOW_TOP_BAR"; 
       const[showTopBar,setShowTopBar] = useState(true);

      useEffect(()=>{
        const saveState = localstorage.getItems(showTopBar);

        if(saveState) setShowTopBar(saveState);
        else localstorage.setItem(showTopBar, true);
      },[]);

      const handleTopBarClose = () => {
        setShowTopBar(false);
        localstorage.setItem(showTopBar, false);
      }
 

      return(
      <div>
      {
        showTopBar && <TopBarComponent onClose={handleTopBarClose}/>
      }
      </div>
      )