Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to uniquely identify computers visiting web site in JavaScript?
Whenever we create any application or website, we need to uniquely identify computers visiting the website. There are many benefits to uniquely identifying computers.
For example, you can provide free trial services when a user visits your website for the first time from a new device. When they visit again, you can ask users to upgrade to premium or subscribe to your application.
Here, we will use cookies to identify computers visiting our website.
What are Cookies?
Cookies allow developers to store user information in the browser. We can send data from the server to the browser and store it locally. When users revisit the website, it fetches data from cookies rather than the server, improving application performance.
In our case, we can set cookies with long expiry times when users visit for the first time. On subsequent visits, we check if cookies exist to determine if it's a returning visitor.
Syntax
// Set cookies
document.cookie = "isVisited=true";
// Get cookies
let cookieArray = decodeURIComponent(document.cookie).split(';');
To set cookies, we assign a key-value pair string to document.cookie. To retrieve cookies, we use document.cookie which returns all cookies as a string.
Implementation Steps
Step 1: Create a fetchCookies() function to retrieve specific cookie values.
Step 2: Decode cookies using decodeURIComponent() and split them into an array.
Step 3: Loop through the cookie array to find the desired cookie.
Step 4: Remove whitespace from each cookie string.
Step 5: Use indexOf() to check if the cookie name matches and extract its value.
Step 6: Create a function to check existing cookies and set new ones if needed.
Example 1: Basic Visitor Detection
This example shows how to detect first-time versus returning visitors using a simple boolean cookie.
<html>
<body>
<h3>Using Cookies to Identify Unique Visitors</h3>
<div id="content"></div>
<script>
let content = document.getElementById('content');
// Function to retrieve specific cookie
function fetchCookies(cookieName) {
let key = cookieName + "=";
let cookieArray = decodeURIComponent(document.cookie).split(';');
for (let i = 0; i < cookieArray.length; i++) {
let part = cookieArray[i];
while (part.charAt(0) == ' ') {
part = part.substring(1);
}
if (part.indexOf(key) == 0) {
return part.substring(key.length, part.length);
}
}
return null;
}
// Check if visitor is new or returning
function checkVisitor() {
let isVisited = fetchCookies("isVisited");
if (isVisited == null) {
content.innerHTML = "Welcome to our website!";
document.cookie = "isVisited=true; expires=Thu, 01 Jan 2099 00:00:00 UTC; path=/";
} else {
content.innerHTML = "Welcome back to our website!";
}
}
checkVisitor();
</script>
</body>
</html>
Example 2: Personalized Visitor Experience
This example collects user names on first visit and personalizes the experience for returning visitors.
<html>
<body>
<h3>Personalized Visitor Identification</h3>
<div id="content"></div>
<script>
let content = document.getElementById('content');
// Function to retrieve specific cookie
function fetchCookies(cookieName) {
let key = cookieName + "=";
let cookieArray = decodeURIComponent(document.cookie).split(';');
for (let i = 0; i < cookieArray.length; i++) {
let part = cookieArray[i];
while (part.charAt(0) == ' ') {
part = part.substring(1);
}
if (part.indexOf(key) == 0) {
return part.substring(key.length, part.length);
}
}
return null;
}
// Handle personalized visitor experience
function handleVisitor() {
let userName = fetchCookies("userName");
if (userName == null) {
let name = prompt("Welcome! Please enter your name:", "Guest");
if (name && name !== "null") {
document.cookie = "userName=" + name + "; expires=Thu, 01 Jan 2099 00:00:00 UTC; path=/";
content.innerHTML = "Nice to meet you, " + name + "!";
} else {
content.innerHTML = "Welcome to our website!";
}
} else {
content.innerHTML = "Hello again, " + userName + "! Thanks for returning.";
}
}
handleVisitor();
</script>
</body>
</html>
Limitations of Cookie-Based Identification
| Limitation | Impact | Solution |
|---|---|---|
| User clears cookies | Loses visitor identification | Use fingerprinting or analytics |
| Different browsers | Same user appears as different visitors | Cross-browser tracking methods |
| Privacy settings | Cookies may be blocked | Fallback identification methods |
Alternative Solutions
For more robust visitor identification, consider these alternatives:
- Google Analytics: Provides comprehensive visitor tracking with built-in privacy compliance
- Browser Fingerprinting: Uses device characteristics like screen resolution, timezone, and installed fonts
- Local Storage: More persistent than cookies but still clearable by users
- Session Storage: Temporary identification that expires when browser closes
Conclusion
Cookies provide a simple way to identify unique website visitors, but they have limitations including user deletion and browser isolation. For production applications, consider combining cookies with analytics tools or fingerprinting techniques for more reliable visitor identification.
814 Views
