How to trigger a jquery function only once in one page, per session?

Question

I have a jQuery function, that produces an animation when my index.html is loaded. I would like this animation to happen only once. If you go on an other page, then come back on the index.html, the animation should not happen.

But I would also like that when the index page is refresh, the animation is displayed.

I don't know if you get it... Anyway thanks !

yes but it's way to huge to copy paste it... Consider it as an "onload" simple jquery function — keyloags, Nov 14 '15 at 11:54
_then come back on the index.html, the animation don't happen_, when you come back to the index the page will refresh?? — Zakaria Acharki, Nov 14 '15 at 11:54
no, if i come back on the index from within the site, there is no animation, but if i refresh the index, there is — keyloags, Nov 14 '15 at 11:55
Check this link http://stackoverflow.com/questions/25070877/jquery-run-once-per-session — brk, Nov 14 '15 at 11:55
No, if you come back on the index by a menu link, the page is not supposed to be refresh — keyloags, Nov 14 '15 at 11:58

score 3 · Accepted Answer · answered Nov 14 '15 at 11:56

3

Javascripts sessionStorage can make this possible.

This sessionStorage-variable will only be accessible while and by the window that created it is open. So, after closing the window, the sessionStorage variable will be undefined.

You can simply create this by using something like sessionStorage.firstVisit = 1.

Simple wrap this in an if-statement to check whether to show the animation or not.

For more info on this check http://www.w3.org/TR/webstorage/#the-sessionstorage-attribute

answered Nov 14 '15 at 11:56

Sebass van Boxel

2,514
1
22
37

I tried using the sessionStorage, it works for the animation not to be displayed if i come back on the index, but if I refresh, the animation won't display either – keyloags Nov 14 '15 at 12:00
@keyloags for this, i would suggest to use $(window).unload(); function in combination with the sessionStorage described above – Sebass van Boxel Nov 14 '15 at 12:02
Could you give me an example ? I don't really know how to manipulate the unload() function... – keyloags Nov 14 '15 at 12:03
I'm going to stick with the sessionStorage. It will refresh the animation only if the browser is closed, but I'll work with it ! Thanks :) – keyloags Nov 14 '15 at 12:11

score 1 · Answer 2 · answered Nov 14 '15 at 12:00

1

Try this one !!

 if (!sessionStorage.isActive) {
        $('.your-div').animate(); //write your code to animate
        sessionStorage.isActive= 1;
    }

answered Nov 14 '15 at 12:00

Jinu Kurian

9,128
3
27
35

I did try it, only I'd like that refreshing the index turn the session storage as it was the first time, displaying the animation – keyloags Nov 14 '15 at 12:01
1

Can you share fiddle if you have any? – Jinu Kurian Nov 14 '15 at 12:04
I don't have one, my code is a bit too heavy for it :/ – keyloags Nov 14 '15 at 12:05

score 0 · Answer 3 · answered Jul 31 '18 at 05:01

Use of sessionStorage may be helpful, You can save

animationContent = document.getElementById("yourID").innerHTML;
sessionStorage.setItem('animationContent', animationContent);
if(sessionStorage.getItem('messageContent')){
    yor animation function;
}

Or

.one ensures this is done only once

$(document).once('ready', function() 
{
    Your Code here;
});

How to trigger a jquery function only once in one page, per session?

3 Answers3

.one ensures this is done only once