Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to uniquely identify computers visiting web site in JavaScript?
Whenever we create any application or website, we require to identify computers visiting the website uniquely. There are a lot of benefits to uniquely identifying computers.
For example, you are providing some services to your users. By uniquely identifying the computer, you can give free service for a trial purpose when a user visits your website for the first time from a new device. When a user visits again, you can ask users to buy premium or subscribe to your application.
Here, we will use cookies to identify the computer visiting web site.
What are cookies?
The cookies allow developers to store the user information in the browser. For example, we can send data to the browser from the server and store them in the browser. So, whenever a user revisits the website, it fetches the data from the cookies rather than from the server. So, cookies increase the performance of the application.
In our case, we can set the cookies to 100 years of expiry when a user visits the website for the first time. After that, whenever a user visits the website again, we check if cookies exist, and then we can say that users have revisited the website.
Syntax
Users can follow the syntax below to set and get cookies on the web browser.
// 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 pair to the document.cookie to set the cookies into the browser. To fetch cookies, we can simply use the document.cookie, which returns the array of cookies.
Steps
Step 1 − Create a fetchCookies() function.
Step 2 − Inside the fetchCookies() function, get the cookies in the array format using the document.cookie and use the decodeURIComponent() method to decode the cookies.
Step 3 − Use the for loop to iterate through the array.
Step 4 − For every element of the array, remove the white spaces from the start of the array.
Step 5 − Use the indexOf() method to check if the array element contains the key at the 0th index and get the key value using the substring() method.
Step 6 − Return the value of the particular key.
Step 7 − Create a fetchCookies() function. In the fetchCookies() function, invoke the getCookie() function and check if cookies exist.
Step 8 − If the cookie is null, set the cookies.
Step 9 − Print the message according to whether the required cookies are null.
Example
In the example below, whenever a user visits the website for the first time, we set the ‘isValidate’ with a ‘true’ value in the cookie. Whenever the user visits the website for the second time, we get the ‘isValidate’ in the cookie, so we print the message like ‘welcome back to the website’.
<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>
Example
In the example below, whenever a user visits the website for the first time, we ask for their name using the prompt box and show the welcome message. Also, we set the cookies with 100 years of expiry.
Whenever the user visits the second time, we show the welcome message with their name without asking for their name to them.
<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 learned to uniquely identify the computer visiting the website using the cookies in JavaScript. However, cookies have some limitations. If the user clears the cookies, we cannot identify the computer uniquely. Also, we need to set the long expiry time for cookies to 100 years. Furthermore, if users use different browsers, we cannot identify the computers uniquely.
The best solution to overcome all the above problems is using google analytics.
465 Views
To Continue Learning Please Login