Javascript: unique if condition per page & cookie

Question

Here's the thing:

I have 2 separate pages with some content hidden which only show up after a certain time is spent on my page (to sync with what I say on my video). This is Page A and this is Page B

On that page, you will see a video. If you reload the page, you will see a green button popping up below. That happens because I have the following script at my page footer to set a cookie and remember that "from 2nd visit onwards, always show the content".

Here's the script:

<script>if(/(^|;)s*cookie_lp=/.test(document.cookie)){var divs=document.querySelectorAll("div.thrv_content_reveal");[].forEach.call(divs,function(e){e.style.display="block"})}else document.cookie="cookie_lp=true; max-age=31536000";</script>

The script itself is very simple: it just checks whether that cookie returns a true value. If so, show content. If not, then set cookie.

(At least that's what I believe it does. It wasn't me who coded.)

The problem is that if I first go to Page A, the button is hidden. If I then immediately visit Page B, the button will show up, even though it's the first visit to that specific page (because the cookie is set in the user's browser).

So what I need is just to adapt the script to make it unique and work on a per page basis. Meaning:

If I access Page A for the 1st time, button is hidden. Second time, button show up. BUT… if I access Page B after that, button should still be hidden (1st visit to that page).

I've tried changing the cookie name to an unique page for each page (e.g.: cookie_lp_pageA), but that created a different problem which I'm not sure why (the button would never show regardless of how many visits).

I believe it's something small which I'm not seen (I'm no coder, just a curious guy). So maybe someone will spot it quickly.

Thanks!

Your problem with your 2 cookie approach may be as shown here, please try offered solution to solve it https://stackoverflow.com/a/47305680/10634638 — estinamir, Mar 25 '20 at 14:50
Thanks, but unfortunately that's a bit too much for me. My knowledge on that is limited. So I can't really make sense and adapt it like that. Thanks for the link though! — Bruno, Mar 25 '20 at 17:48

score 0 · Answer 1 · answered Mar 26 '20 at 02:09

You can try using local storage https://www.w3schools.com/jsref/prop_win_localstorage.asp

This code should work on either page A or B:

<!DOCTYPE html>
<html>
<head>
<script>
function visitCounter(pageID) {
  if(typeof(Storage) !== "undefined") {
    if (localStorage['page'+pageID]) {
      localStorage['page'+pageID] = parseInt(localStorage['page'+pageID]) + 1;     
      document.getElementById('button1').innerText = "Show";
    } else {
      localStorage['page'+pageID] = 1;
    }
    document.getElementById("result").innerHTML = "You have visited " + localStorage['page'+pageID] + " time(s).";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>

<p><button type="button" id="button1">Hide</button></p>

<div id="result"></div>

<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>


<script>
   var url  = window.location.pathname;
   var pageID = url.substr(url.lastIndexOf("/") + 1); //pageA, pageB
   visitCounter(pageID);
</script>
</body>
</html>

Javascript: unique if condition per page & cookie

1 Answers1