Detect if site visit is new with js

问题:

I would like to check if a user who opens my website is new (type in url OR redirect through google) and then display a message.

But when the user browse through the site (subpages like about and so on) this message is not displayed.

But when the user closes the browser and visits (maybe a few mintues later) the website again, the message should be displayed again.

How can I implement something like this in JavaScript?

回答1:

You could use cookies, localStorage, sessionStorage or the referrer info. Note that all of them have their own pros and cons and there is no 100% reliable way of detecting new visitors.

Using the firstImpression.js library that Nadav S mentioned is probably the easiest way.

To get the message to show up for users closing and reopening the site:

• unset your cookie / localStorage data on unload or

• use a referrer info or sessionStorage based solution

See these MDN resources for more:

• cookie
• localStorage
• sessionStorage
• referrer

Slightly relevant as well: http://www.cookielaw.org/faq/

回答2:

From the MDN:

Returns the URI of the page that linked to this page.

 string = document.referrer;

The value is an empty string if the user navigated to the page directly (not through a link, but, for example, via a bookmark). Since this property returns only a string, it does not give you DOM access to the referring page.

This means:

if (!document.referrer) {
    //Direct access
} else {
    var referer = document.referrer;
    //Request comes from referer
}

If you want to save this state, you need to take a look at cookies.

回答3:

You can implement this by using cookies.

When the visitor first come to your page, you check if your cookie exist, if not show the message to them and then create the cookie for future pages.

回答4:

Quite easily, you want session storage

var hasVisited = sessionStorage.getItem('washere');

if ( ! hasVisited ) {

    // do stuff
    alert('Welcome, stranger !');
    sessionStorage.setItem('washere', true);
}

回答5:

Using cookies is probably your best bet. They are super simple to use too. Just write

if(document.cookie = "HasVisited=true"){
   //whatever you want it to do if they have visited
}
else {
   document.cookie = "HasVisited=true"
   //that just saves to their browser that they have for future     reference
}