I am wondering how I can use html css & javascript to detect if a user is new to my webpage, meaning it's their first time browsing the website, and if they are new, redirect them to a url. How can this be done? I'm not sure if this requires lots of code or is relatively simple. If the answer requires lots of code to be written, maybe just a general outline of how this can be done?

I am wondering how I can use html css & javascript to detect if a user is new to my webpage, meaning it's their first time browsing the website, and if they are new, redirect them to a url. How can this be done? I'm not sure if this requires lots of code or is relatively simple. If the answer requires lots of code to be written, maybe just a general outline of how this can be done?

• javascript
• html
• jquery
• css
• http-redirect

• PHP cookies? Not sure if this can be done in JS – Greenreader9 Commented Jul 3, 2021 at 17:49
• This is to be best handled by your backend server (API), where you can easily maintain browser cookies. You can read up on HTTP cookies and find out how to best implement them in your backend. – Moses Commented Jul 3, 2021 at 17:55

3 Answers 3

You can use Window.localStorage.

When the user loads the page, check if a key exists in the storage. If it does not, this is the user's first time visiting the site. Then give the key a value so on future visits you don't mistake the user to be a new user again.

const isNew = localStorage.getItem("visit") == null;
if (isNew) {
  localStorage.setItem("visit", ".");
  //It's a new user
} else {
  //It's not a new user
}

Codesandbox example:

The same logic can be applied to cookies. E.g, something like this (uses the js-cookie library):

const hasVisited = Cookies.get("has-visited") == undefined;
if (hasVisited) {
  Cookies.set("has-visited", "true");
  //It's a new user
} else {
  //It's not a new user
}

To redirect we can simply do location = "url-to-redirect-to."

Basically You want to keep track of 2 types of people -

1. New user
2. old user

1st solution

suppose a new user visits a page then set a cookie in their browser like visited like marking the seeps in a herd .

then check when a user visits your website has a cookie set or not if set then do treat him as a old sheep or its a new born .

Pros

No need of a server

cons

if mark/cookie deleted or tampered then a dyeing old sheep is gonna treat as a new born which is weird and not a good experience for that user.

Method 2

Make your all user to register , then redirect them login .

allocate every ship a unique id like sheep1 , sheep2

then keep track of their progress . like

sheep1 ---> 8 year old & producing 4 liter milk a day

sheep2 ---> 3 year old & pregnant

sheep3 ---> 11 year old & only eating , probably gonna die

Now

when a user login then set their unique key in cookie

Now keeping track and smoothing user Experience

when a user visits your page check he has that unique key if yes then validate it from server then if invalid then force him to login.

Now ask the server to give data about that unique key .

and CHECK THEIR PROGRESS & TREAT THEM HOW YOU LIKE ---

At last user is happy with this treatment and you are producing more Milk

You can create a cookie new_user=1 and check it in your code like "if cookie new_user is not isset then redirect user".