jQuery: Show div after 2 seconds on my website, but only once and not every time the page is refreshed or when entering a different page

Question

I have a website with a blog.

Whenever entering it, I want a popup div to be displayed. ( this part is simple - Use jQuery to show a div in 5 seconds )

I want this to run once, maybe pare session or IP, I'll explain:

When a user opens the blog page, after 2 seconds he will see the popup. and then he can click the X button to hide it and continue browsing the blog, enter new pages and not get the button displayed again.

Is that possible to do only from the front end? (using JS/jQuery)?

Use a cookie to know if it's the first visit or not – François Dupont Apr 12 '16 at 08:32 — François Dupont, Apr 12 '16 at 08:32

T.J. Crowder · Accepted Answer · 2016-04-12T08:40:14.400

I'm not sure whether you want to show it once per session or just once to any user who visits (and not again when they visit next time, even if it's the next day).

If it's just once, ever, then you can store a flag in localStorage. If it's once per session, you can store a flag in sessionStorage. Both are extremely well-supported.

Here's a localStorage example; sessionStorage is exactly the same except you use sessionStorage instead of localStorage:

if (!localStorage.getItem("shown-popup")) {
    // We haven't shown it yet
    setTimeout(function() {
        // ----show the div here ----

        // Flag we've shown it (you might do this only when they click the [x])
        localStorage.setItem("shown-popup", "yes");
    }, 2000);
}

Note that items in local storage are strings.

To allow for the few without local storage or who have it disabled (private browsing, etc.), wrap the check and the set in try/catch:

var needToShowPopup = true;
try {
    needToShowPopup = !localStorage.getItem("shown-popup");
} catch (e) {
}
if (needToShowPopup) {
    // We haven't shown it yet
    setTimeout(function() {
        // ----show the div here ----

        // Flag we've shown it (you might do this only when they click the [x])
        try {
            localStorage.setItem("shown-popup", "yes");
        } catch (e) {
        }
    }, 2000);
}

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

You can use Cookies from the client side. Please refer to How do I set/unset cookie with jQuery? in how to do so.

edited May 23 '17 at 12:24

Community

1
1

answered Apr 12 '16 at 08:33

Norman

3,279
3
25
42

Cookies for purely client-side information are an anti-pattern. – T.J. Crowder Apr 12 '16 at 08:34
@T.J.Crowder Could you please explain this in detail? – Norman Apr 12 '16 at 08:35
1

Cookies are sent to the server with every HTTP request to the server. Using them for purely client-side information therefore adds overhead to every HTTP request for no purpose; the server doesn't need that information. That's part of why web storage was invented many, many years ago. (It also has a dramatically better API than cookies do.) – T.J. Crowder Apr 12 '16 at 08:38
@T.J.Crowder Thanks for the explanation. – Norman Apr 12 '16 at 08:39

score -1 · Answer 3 · answered Apr 12 '16 at 08:42

You could put a flag in localstorage/sessionstorage mentioning true or false . If it is first time then check :

if (localStorage.getItem('divAlreadyShown') === 'true') { //don't show the DIV } else { //show the DIV and mark the 'divAlreadyShown' as false for next time hiding localStorage.setItem('divAlreadyShown', 'true'); }

Note : You could change the localStorage to sessionStorage if you want to do this activity per browser session.

jQuery: Show div after 2 seconds on my website, but only once and not every time the page is refreshed or when entering a different page

3 Answers3