How can I create a "first-load" event in html or Javascript?

Question

I'm starter. I have an idea. I want to implement an event like this. Is it possible?

<html>
<head>
<title>First visit event</title>

<script>
function do_something()
{
    alert("Hello my friend. This is your first visit.");
}
</script>

</head>

<body firstVisitEvent="do_something()">
</body>

score 3 · Answer 1 · answered Oct 20 '13 at 05:44

Localstorage is probably the way to go. Here is a bit of info on it: http://diveintohtml5.info/storage.html

Basically it allows you to store small amounts of data on the user's machine (up to 5mb in most browsers). So all you need to do is set a flag in there letting you know that the user has already visited, and if that flag isn't present on page load, show the message.

// Run function on load, could also run on dom ready
window.onload = function() {
    // Check if localStorage is available (IE8+) and make sure that the visited flag is not already set.
    if(typeof window.localStorage !== "undefined" && !localStorage.getItem('visited')) {
         // Set visited flag in local storage
         localStorage.setItem('visited', true);
         // Alert the user
         alert("Hello my friend. This is your first visit.");   
    }
}

This should work in all browsers where local storage is available. See caniuse.com for reference. http://caniuse.com/#search=localstorage

score 2 · Accepted Answer · 2013-10-20T05:35:09.277

2

Use on load. It will execute when the page loads, and you will see your alert. Good luck with your knowledge.

    <html>
    <head>
    <script>
    function load()
    {
    alert("Page is loaded");
    }
    </script>
    </head>
    <body onload="load()">
    <h1>Hello World!</h1>
    </body>
    </html>

Edit: You can get more advance and set cookies to see if it's the user's first time, but I'm not sure you're at that level yet, but anyways:

You could for example set a localStorage property like

if(!localStorage["alertdisplayed"]) {
    alert("Your text")
    localStorage["alertdisplayed"] = true
}

Note that localStorage isn't supported by older Browsers.

An alternative would be setting a Cookie and check against its existence

If you don't know how to set / get cookies with javascript, i would suggest, reading this article: https://developer.mozilla.org/en-US/docs/Web/API/document.cookie?redirectlocale=en-US&redirectslug=DOM%2Fdocument.cookie

edited Oct 20 '13 at 05:35

answered Oct 20 '13 at 05:24

Read the rest of my post. If you want it to not show a second time for the same user, then you need to use localStorage property. It will work for what you need. – Oct 20 '13 at 05:34
Does it work for every browser? I mean on the chrome or IE or Firefox. – UserMat Oct 20 '13 at 05:44
@UserMat Yes, newer ones. Not old ones. However, that's one way of doing it. Read the article I posted. It shows how to do it via setting a cookie. Basically you would load the page, that alert would come, and the cookie would be set. If the user refreshes the page, the code will check if the cookie exist, and no alert box will be displayed if it does. – Oct 20 '13 at 05:46

score 1 · Answer 3 · answered Oct 20 '13 at 05:23

1

You have a couple of options: storing a cookie on the client or utilizing the local storage of html5. Either of these could be checked on page load.

Here is a link for getting started with HTML5 web storage:

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

answered Oct 20 '13 at 05:23

m3h2014

156
5

Can I create an event by using cookies? I mean create an event that uses cookies and add it to library so every user can use it very easily. – UserMat Oct 20 '13 at 05:26
Yes, but I don't know why you would. The validation you are seeking wouldn't be hard to implement. It would simply consist of checking the cookie/web storage onPageLoad. The meat of your code will involve creating/storing/retrieving the cookie you want to use. Here is a link to help you manipulate cookies with js : http://www.w3schools.com/js/js_cookies.asp – m3h2014 Oct 20 '13 at 05:29
I also believe the last example in that link shows you how to do the validation you're seeking. If not, it's very close. – m3h2014 Oct 20 '13 at 05:32

score 1 · Answer 4 · answered Oct 20 '13 at 05:26

1

you can do it for chrome in following way

<html>
<head> 
<title>First visit event</title>    
<script> 
function do_something() {
    if(typeof(localStorage.setVisit)=='undefind' || localStorage.setVisit==''){
        localStorage.setVisit='yes';
        alert("Hello my friend. This is your first visit.");
    }
} 
</script>

</head>

<body onload="do_something()"> </body>

answered Oct 20 '13 at 05:26

Vicky Gonsalves

11,593
2
37
58

You mean it just work for Google chrome? Can't I use it for IE or Firefox? – UserMat Oct 20 '13 at 05:39
it will work in all localStorage supporting browsers – Vicky Gonsalves Oct 20 '13 at 05:53

score 0 · Answer 5 · answered Feb 20 '20 at 19:46

Since working with localStorage can be tedious because of operators and function names, to simplify you can use the in operator to check if a key exists:

window.onload = function () {
        if(!('hasThisRunBefore' in localStorage)) {
            /** Your code here... **/
            localStorage.setItem("hasThisRunBefore", true);
        }
    }

How can I create a "first-load" event in html or Javascript?

5 Answers5

Linked