test.html

<style>
  body {
    background: #333;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    margin: 0;
    padding: 0;
  }

  #messages {
    width: 100%;
    position: fixed;
    top: 0;
  }

  .message {
    background-color: white;
    padding: 1em 0;
    text-align: center;
  }

  .message-close {
    background-color: transparent;
    color: #0072ce;
    border: 0;
    margin-left: 3rem;
    cursor: pointer;
    border: 0;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5em 1em;
  }

  .message-close:hover {
    background-color: #0072ce;
    color: white;
  }

  [x-cloak] {
    display: none !important;
  }

</style>
<script src="//unpkg.com/alpinejs" defer></script>
<div id="messages">
  <div x-cloak
    x-data="{ open: localStorage.getItem('message1') !== 'true', message1: localStorage.getItem('message1') === 'true' }"
    x-show="open" x-init="$watch('message1', val => localStorage.setItem('message1', val))"
    x-bind:class="{ 'message1': message1 }" class="message" id="message1">
    <span>
      Content...
    </span>
    <button @click="open = false; message1 = !message1" class="message-close">x</button>
  </div>
</div>