-1

I created a site for a friend of mine which is a photographer. The home page of the website is blured, completely, until you click a button which unblurs the home page.

Everything works fine, the problem is that every time you reload the home page or simply navigate back on it, you have to click that button to unblur the page.

The question is: can I run this function ONLY once, even if the user reloads the page? Do you have any suggestions?

Ralf
  • 16,086
  • 4
  • 44
  • 68
Bogdan Florin
  • 103
  • 2
  • 8
  • Welcome to SO! Make sure to read [this page](https://stackoverflow.com/help/how-to-ask) in the help center for info on how to post a good question. Cheers! – 0xCursor Jul 18 '18 at 00:38
  • 2
    You could probably use a cookie or localstorage to store that data (whether to blur the page or not). Once the user clicks that button, change that data so the next time you won't have to blur it. – ibrahim mahrir Jul 18 '18 at 00:42
  • Ty ibrahim. One more solution that I have found ( which is not the best ) is to simply duplicate the home page, without the function, and change the href from nav menu to the copy of the homepage. I guess that works too, excepting the case when you reload the index. – Bogdan Florin Jul 18 '18 at 00:51

1 Answers1

0

This is possible with the use of cookies. I'd suggest looking at this documentation on JS Cookies.

The basis behind the solution is to check if the user has already clicked on the "unblur" button. If he has already clicked it, show the content. If he has not, show the pop up. Once the user has clicked the "unblur" button run a function to create the cookies. (Personally, I'd set the cookies for 30 days as you have to provide a date otherwise it will show again at every session - alternatively you could set the cookies to expire in like 2038).

This solution should meet your criteria.

Lachie
  • 1,321
  • 1
  • 10
  • 26