Run function once per site/chrome session

Question

I'm trying to make a program that when you visit the site, it shows the div, a button is pressed to hide it, and it isn't shown again until chrome is closed and reopened.

function check() {
  if (sessionStorage.alreadyClicked) {
    document.getElementsByClassName('disclaimer-container')[0].style.display = "none";
    sessionStorage.alreadyClicked = 1;
}

I've tried adding sessionStorage.alreadyClicked to by code as seen here to no avail.

No matter what I do the div will always show. I'm looking a cross browser solution in the long term but as of now just chrome.

have you tried == > sessionStorage.setItem('alreadyClicked ',1); and this is how you get it sessionStorage.getItem('alreadyClicked ') — IbraHim M. Nada, Aug 29 '23 at 11:21
`if (sessionStorage.alreadyClicked)` should have been `if (!sessionStorage.alreadyClicked)` as shown [here](https://stackoverflow.com/a/25070971). Also *logically* the code should be checking if something has *not* been clicked, then setting the `alreadyClicked`. Rather than only setting `alreadyClicked` if it was set. — VLAZ, Aug 29 '23 at 11:26
_"and it isn't shown again until chrome is closed and reopened"_ - `sessionStorage` is limited to the individual _tab_ - if you close the tab, the page session is lost. Opening the same URL in a different tab, will also get that tab its own, individual page session. So for "until Chrome is closed and reopened", this won't work. — CBroe, Aug 29 '23 at 11:36

IbraHim M. Nada · Accepted Answer · 2023-08-29T11:29:35.827

0

this should work , although I recommend to get the div by id not class because the following function will hide only the first one because of the [0] so you need to make sure that it will always be first at this case. -thank you VLAZ-

function check() {
  if (sessionStorage.getItem('alreadyClicked') != 1) {
    document.getElementsByClassName('disclaimer-container')[0].style.display = "none";
     sessionStorage.setItem('alreadyClicked',1);
}

edited Aug 29 '23 at 11:29

answered Aug 29 '23 at 11:25

IbraHim M. Nada

693
6
26

"*the following function will hide anything with this class*" it would only hide the first item with that class. – VLAZ Aug 29 '23 at 11:27
didnt see the [0] thank you brother – IbraHim M. Nada Aug 29 '23 at 11:28

score 0 · Answer 2 · answered Aug 30 '23 at 04:58

I was able to get this working by using IbraHim M. Nada's answer to compare the value of alreadyClicked

function check() {
  if (sessionStorage.getItem('alreadyClicked') != "y") { // Why wasn't I using != to begin with?
    document.querySelector('.disclaimer-container').style.display = "block";
  }
  else {
    document.querySelector('.disclaimer-container').style.display = 'none';
  }
}

Then I added sessionStorage.setItem('alreadyClicked', "y"); to the hide function after clicking the button. This works flawlessly.

I also started using querySelector instead of getElementsByClassName

try to mark the answer that helped you as an answer – IbraHim M. Nada Aug 30 '23 at 06:13 — IbraHim M. Nada, Aug 30 '23 at 06:13

score -1 · Answer 3 · answered Aug 29 '23 at 11:27

From that same page:

“Be careful with sessionStorage because it can only store string values.”

Right now your if statement is essentially checking if that storage exists, which will always return true.

Try this instead:


function check() {
  if (!sessionStorage.alreadyClicked = “y”) {
    document.getElementsByClassName('disclaimer-container')[0].style.display = "none";
    sessionStorage.alreadyClicked = “y”;
}

Run function once per site/chrome session

3 Answers3