Materialize modal pops up when returning to Home page from another site page

Question

I'm using Materialize's modal for an email sign-up pop-up on load, and the issue I'm running into is that when I first visit the site the modal pops up as expected. But if I click on another page, like go to the About page, and then back to the Home page, the modal launches again. How can I get it to only pop up the first time the page is visited? Any advice is much appreciated. Thanks.

    <div id="modal1" class="modal">
        <div class="modal-content">
            <h4>Want more of 'Carrow?</h4>
            <p>Join our mailing list!</p>
            <p>No, we won't fill your inbox every day, and no, we won't sell your information to anyone else – PROMISE!</p>
            <p>What you will get is content only available to our email subscribers, as well as advance notice on upcoming events and book launch dates.</p>
        </div>
      <div class="modal-footer">
        <a href="#modal2" class="modal-action modal-close button">Sign up</a>
      </div>
    </div>

    <div id="modal2" class="modal"
    style="height:350px;">
        <form class="container"
        style="padding:45px;">
            <label>Name:  <input type="text" style="border-color:#840081;" autofocus /></label>
            <label>Email: <input type="email" style="border-color:#840081;" /></label>
        </form>
        <div class="row center-align">
        <!-- <div class="modal-footer"> -->
            <a href="" class="modal-action modal-close button" id="join-btn">Join!</a>
        </div>
    </div>



<script>
    let buttons = document.getElementsByClassName('button');

    for (let i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function(e) {
        let wavePosX = e.offsetX,
            wavePosY = e.offsetY,
            button = e.target,
            buttonWidth = button.clientWidth,
            wave = document.createElement('span');

        wave.className = 'material-wave';
        wave.style.top = wavePosY + 'px';
        wave.style.left = wavePosX + 'px';

        // Append wave element to the button
        e.target.appendChild(wave);

        // Start scale and opacity transitions
        setTimeout(function() {
          wave.style.opacity = 0;
          wave.style.transform = 'scale(' + buttonWidth / 10 + ')';
        }, 0);

        // Remove the wave element after the transition
        // Should use Modernizr's transitionEndEventName
        setTimeout(function() {
          button.removeChild(wave);
        }, 800);
      });
    };
</script>

<script>
    $('.modal').modal({
        dismissible: true,
        inDuration: 300,
        outDuration: 200
      }
    );
    $(document).ready(function(){
      $('#modal1').modal('open');
    });
    $('#join-btn').click(() => {
        $('#modal1').modal('close');
    });
</script>