Whenever we create any application or website, we need to uniquely identify the computer accessing the website. There are many benefits to uniquely identifying a computer.
For example, you are providing some services to users. By uniquely identifying a computer, you can offer a free trial when a user visits your site from a new device for the first time. When users return, you can ask them to purchase a premium version or subscribe to your app.
Here we will use cookies to identify the computer visiting the website.
Cookies allow developers to store user information in the browser. For example, we can send data from the server to the browser and store it in the browser. So, whenever the user revisits the website, it will get the data from the cookie instead of from the server. Therefore, cookies can improve application performance.
In our example, we can set the cookie to expire in 100 years when the user first visits the website. After that, whenever the user visits the website again, we check if the cookie exists and then we can say that the user revisited the website.
Users can set and get cookies on their web browsers according to the following syntax.
// to set cookies
document.cookie = "isVisited=true";
// to get cookies
let ca = decodeURIComponent(document.cookie).split(';');
In the above syntax, we assign a string with key-value pairs to document.cookie to set cookies to the browser. To get cookies we can simply use document.cookie which returns an array of cookies.
Step 1 - Create the fetchCookies() function.
Step 2 - In the fetchCookies() function, use document.cookie to get the cookie in array format, and use the decodeURIComponent() method to decode the cookie.
Step 3 - Iterate over the array using a for loop.
Step 4 - For each element of the array, remove the spaces at the beginning of the array.
Step 5 - Check if the array element contains the key at index 0th using the indexOf() method and get the key value using the substring() method.
Step 6 - Return the value for a specific key.
Step 7 - Create the fetchCookies() function. In the fetchCookies() function, call the getCookie() function and check if the cookie exists.
Step 8 - Set cookie if cookie is empty.
Step 9 - Print message based on whether the required cookie is empty or not.
In the example below, we set "isValidate" to the "true" value in the cookie every time the user visits the website for the first time. Whenever the user visits the site for the second time, we get "isValidate" in the cookie, so we print a message like "Welcome back to the site."
<html>
<body>
<h3>Using the <i> Cookies </i> to uniquely identify computers visiting web site in JavaScript</h3>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
// function to get cookies
function fetchCookies(cname) {
let key = cname + "=";
let ca = decodeURIComponent(document.cookie).split(';');
for (let i = 0; i < ca.length; i++) {
let part = ca[i];
while (part.charAt(0) == ' ') {
part = part.substring(1);
}
if (part.indexOf(key) == 0) {
return part.substring(key.length, part.length);
}
}
return null;
}
// set cookies to uniquely identify the computer visiting the website
function checkCookies() {
var cookies = fetchCookies("isVisited");
if (cookies == null) {
content.innerHTML = "Welcome to the website";
document.cookie = "isVisited=true";
} else {
content.innerHTML = "Welcome back to the website";
}
}
checkCookies();
</script>
</body>
</html>
In the example below, whenever a user visits the site for the first time, we use a prompt box to ask for their name and display a welcome message. Additionally, we set cookies to be valid for 100 years.
Whenever a user visits for the second time, we display a welcome message with their name without asking for their name.
<html>
<body>
<h3>Using the <i> Cookies </i> to uniquely identify computers visiting web site in JavaScript</h3>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
// function to get cookies
function fetchCookies(cname) {
let key = cname + "=";
let ca = decodeURIComponent(document.cookie).split(';');
for (let i = 0; i < ca.length; i++) {
let part = ca[i];
while (part.charAt(0) == ' ') {
part = part.substring(1);
}
if (part.indexOf(key) == 0) {
return part.substring(key.length, part.length);
}
}
return null;
}
// set cookies to uniquely identify the computer visiting the website
function checkCookies() {
var cookies = fetchCookies("customCookie");
if (cookies == null) {
let name = prompt("Enter your name", "Shubham");
document.cookie = "customCookie=" + name + "; expires=Thu, 23 Oct 2120 12:00:00 UTC; path=/";
content.innerHTML = "How are you " + name + "?";
}
else {
content.innerHTML = "Hey, " + cookies + " You visited our site again!";
}
}
checkCookies();
</script>
</body>
</html>
Users learn to use cookies in JavaScript to uniquely identify the computer visiting the website. However, cookies have some limitations. If a user clears cookies, we cannot uniquely identify that computer. Additionally, we need to set the cookie expiry date to 100 years. Additionally, we cannot uniquely identify a computer if a user uses a different browser.
The best solution to overcome all the above problems is to use Google Analytics.
The above is the detailed content of How to uniquely identify the computer visiting a website in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
