Member Avatar for Bidesh

Please answer this I am getting frustrated 🥴

  • 3 Contributors
  • 2 Replies
  • 414 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by 1Truth
1Truth commented: Yes that's ok. I have set up for both cookie storage and local storage +0

Dani AI

Generated

A reliable pattern is to persist a small client-side flag when the close button is clicked and check that flag on page load. is correct that some form of persistence (cookies/localStorage) is needed; was right to ask what “once” means — decide whether the banner should be hidden per browser (localStorage), per tab/session (sessionStorage), or across devices (requires a server-side flag tied to a user account).

A compact localStorage approach (recommended for client-only, long-lived persistence):

document.addEventListener('DOMContentLoaded', function () {
  var banner = document.querySelector('#box'); // adjust selector to match markup
  if (!banner) return;
  if (localStorage.getItem('bannerDismissed')) {
    banner.style.display = 'none';
    return;
  }
  var close = banner.querySelector('.closebtn') || document.querySelector('#btn');
  if (close) {
    close.addEventListener('click', function () {
      banner.style.display = 'none';
      try { localStorage.setItem('bannerDismissed', '1'); } catch (e) { /* storage blocked */ }
    });
  }
});

If a cookie is preferred (for server reading or explicit expiry), set a cookie on close and check it on load. A short cookie helper (set/get) can be used to write a cookie that expires after N days.

Notes and troubleshooting:

  • localStorage is per-origin and persists until cleared; sessionStorage lasts only for the tab. Incognito/private modes or strict privacy settings can disable storage.
  • Clearing cookies/localStorage or switching browsers/devices will show the banner again unless the flag is stored server-side (requires login or a server-side identifier).
  • Verify behavior in DevTools (Application > Local Storage or Storage > Cookies). Ensure the script runs after the banner DOM exists and that selectors match the actual markup.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

Probably not, there are often ways around it, but more importantly, what are your requirements exactly?

Member Avatar for 1Truth

I'm having the same issue. I want to show a custom message alert but I only want it to be shown once and when the visitor closes it with the x button then the cookies remember to not show it again.

This is the div (with the CSS):

<head>
<meta charset="UTF-8" />

<style>
.alert {
    padding: 20px;
    background-color: limegreen;
    color: white;
    font-size: 14px;
    line-height: 20px;
    height: auto;
    width:calc(100% - 50px);
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 20px;
    line-height: 18px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
</style>
</head>

<body>
    <div class="container alert" id="box">
        <strong><em>No worries!</em>&nbsp;&nbsp;</strong>There will be updates displayed like this in the future.
        <a class="closebtn" id="btn">&times;</a>
    </div>    
</body>

I've been trying to get this to work but when I refresh the page it comes back anyways. I was told that JavaScript could be used to
store this information. Is there a way to make this work?

commented: For this we can set one value in local storage, is that okay? +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.