2

I have this code

setTimeout(function () {
    $("#videoOverlay").fadeIn();
    document.getElementById("video").play();
}, 8000);

This means 8 seconds after loading, a pop-up will come up and a video will play. I only want this to come up the first time I visit the site. How can I do this with jQuery?

Sebastian Alsina
  • 85
  • 1
  • 3
  • 9

2 Answers2

11

Try with localStorage instead of cookie:

if (!localStorage.getItem('viewed')){
    setTimeout(function () {
        $("#videoOverlay").fadeIn();
        document.getElementById("video").play();
        localStorage.setItem('viewed','yes');
    }, 8000);
};

To delete it:

localStorage.removeItem('viewed');

With local storage, web applications can store data locally within the user's browser.

FROM http://www.w3schools.com/html/html5_webstorage.asp

What is HTML Local Storage?

Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Using: sessionStorage

You can also use sessionStorage object that is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

if (!sessionStorage.viewed){
    setTimeout(function () {
        $("#videoOverlay").fadeIn();
        document.getElementById("video").play();
        sessionStorage.viewed=1
    }, 8000);
};
Vixed
  • 3,429
  • 5
  • 37
  • 68
  • This worked like charm. Could you explain to me the difference between localStorage and cookies? To my understanding, this should be done with cookies, but localStorage successfully did it, and it seems like they both act the same. Would you be kind enough to enlighten me on the difference? – Sebastian Alsina Feb 14 '16 at 20:52
  • Of course! I've added an explanation in the answer. – Vixed Feb 14 '16 at 20:58
  • Also remember that if you need to remove it **localStorage.removeItem('viewed');** – Vixed Feb 14 '16 at 21:04
  • Usage of localStorage is perfect example for my use case. Thanks :) – Shaze Dec 13 '19 at 10:04
1

you could try this jquery cookie plugin https://github.com/js-cookie/js-cookie

and then you can use it with 

Cookies.get('name'); 
Cookies.set('name','value');
flynorc
  • 829
  • 6
  • 13
  • Thanks! Another user suggested I use localStorage and it worked flawlessly. – Sebastian Alsina Feb 14 '16 at 21:00
  • I admit I didn't use either of these libraries but it looks like your code is for the old, deprecated https://github.com/carhartl/jquery-cookie. The new library you're linking to doesn't seem to be a jQuery plugin any more and has a different syntax. Also, in the code didn't you accidentally swap writing of the cookie with reading? – kamilk Feb 14 '16 at 21:11
  • @kamilk you are correct. I had that code for the old plugin and did not realize i linked a newer version. I changed the answer. As far as i know writing to the cookie we can do every time (if it already exists it will be overwriten or am i wrong?) – flynorc Feb 14 '16 at 21:35