Is there a possibility with javascript to show a scroll hint only at the first pageload?

Question

I have created a simple scroll hint which disappears by mousedown. My goal is that the hint is only displayed the first time. When I reload the page, it should not be displayed again. Only again when the cache of the web page is cleared.

Is there a simple way to realise it with javascript?

function hideHint() {
  document.getElementById("scroll-hint").style.display = "none";
}

body {
  margin: 0;
}

#content {
  background-color: orange;
  height: 100vh;
  width: 100vw;
}

#scroll-hint {
  background-color: gray;
  border-style: solid;
  height: 20vh;
  width: 20vw;
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  left: 40%;
}

.mouse {
  display: block;
  width: 23px;
  height: 40px;
  border-radius: 13px;
  border: 2px solid blue;
  position: absolute;
  left: 50%;
  margin: 0 auto 0 -14px;
  background-color: white;
}

span {
  display: block;
  margin: 6px auto;
  width: 3px;
  height: 7px;
  border-radius: 100%;
  background: blue;
}

<div id="content" onmousedown="hideHint()">
  <div id="scroll-hint">
    <div class="mouse">
      <span></span>
    </div>
  </div>
</div>

Answer 1

I would use localStorage for that.

function hideHint() { document.getElementById("scroll-hint").style.display = "none"; localStorage.setItem('scrollHint', 'is_seen') }

if(localStorage.getItem("scrollHint"));

function hideHint() {
  document.getElementById("scroll-hint").style.display = "none";
  localStorage.setItem('scroll_hint', true);
}

if (localStorage.getItem('scroll_hint')) {
  document.getElementById("scroll-hint").style.display = "none";
}

body {
  margin: 0;
}

#content {
  background-color: orange;
  height: 100vh;
  width: 100vw;
}

#scroll-hint {
  background-color: gray;
  border-style: solid;
  height: 20vh;
  width: 20vw;
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  left: 40%;
}

.mouse {
  display: block;
  width: 23px;
  height: 40px;
  border-radius: 13px;
  border: 2px solid blue;
  position: absolute;
  left: 50%;
  margin: 0 auto 0 -14px;
  background-color: white;
}

span {
  display: block;
  margin: 6px auto;
  width: 3px;
  height: 7px;
  border-radius: 100%;
  background: blue;
}

<div id="content" onmousedown="hideHint()">
  <div id="scroll-hint">
    <div class="mouse">
      <span></span>
    </div>
  </div>
</div>