admin管理员组文章数量:1024673
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?
Share Improve this question asked Jul 3, 2021 at 17:46 Aidan YoungAidan Young 6246 silver badges21 bronze badges 2- 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
Reset to default 4You 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 -
- New user
- 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".
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?
Share Improve this question asked Jul 3, 2021 at 17:46 Aidan YoungAidan Young 6246 silver badges21 bronze badges 2- 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
Reset to default 4You 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 -
- New user
- 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".
本文标签: javascriptHow can I detect a new user and redirect if they are newStack Overflow
版权声明:本文标题:javascript - How can I detect a new user and redirect if they are new - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745615978a2159294.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论