Cómo Hacer un Contador de Visitas con JavaScript

En este tutorial, aprenderás cómo crear un contador de visitas usando JavaScript. Vamos a explorar diferentes técnicas y a optimizar nuestro código para manejar alto tráfico en una web.

Técnica 1: Uso de Local Storage

El uso de Local Storage en JavaScript es una manera sencilla de rastrear las visitas de un usuario en una sola máquina. Aquí tienes un ejemplo de cómo implementarlo.

if (localStorage.pageVisitCount) {
  localStorage.pageVisitCount = Number(localStorage.pageVisitCount) + 1;
} else {
  localStorage.pageVisitCount = 1;
}
document.getElementById('visitCount').innerText = localStorage.pageVisitCount;

Este código verifica si el navegador ha almacenado un contador de visitas en el almacenamiento local. Si es así, incrementa el contador; si no, lo inicializa en 1. Luego puedes enviar este resultado de forma sincrónica a tu servidor. 

Técnica 2: Uso de Cookies

Las cookies son útiles para rastrear datos entre sesiones del navegador. Aquí tienes un ejemplo de cómo crear un contador de visitas con cookies. Esta técnica funciona similar a la anterior con local storage. 

function setCookie(name, value, days) {
  var expires = '';
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = '; expires=' + date.toUTCString();
  }
  document.cookie = name + '=' + (value || '') + expires + '; path=/';
}

function getCookie(name) {
  var nameEQ = name + '=';
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {   
  document.cookie = name + '=; Max-Age=-99999999;';  
}

var visits = getCookie('visitCount');
if (visits) {
  visits = Number(visits) + 1;
} else {
  visits = 1;
}
setCookie('visitCount', visits, 365);
document.getElementById('visitCount').innerText = visits;

Este código comprueba si hay una cookie de 'visitCount' y la incrementa en 1. Si no existe, la crea con un valor de 1. Luego guarda la cookie actualizada en el documento.

Técnica 3: Uso de una Base de Datos y Node.js

Para manejar alto tráfico, es recomendable usar una base de datos para almacenar los contadores de visitas. A continuación se muestra un ejemplo básico usando Node.js con una base de datos MongoDB.

const express = require('express');
const mongoose = require('mongoose');

const app = express();
const port = 3000;

mongoose.connect('mongodb://localhost/visitCountDB', {useNewUrlParser: true, useUnifiedTopology: true});

const visitSchema = new mongoose.Schema({ count: Number });
const Visit = mongoose.model('Visit', visitSchema);

app.get('/', async (req, res) => {
  let visit = await Visit.findOne();
  if (visit) {
    visit.count += 1;
  } else {
    visit = new Visit({ count: 1 });
  }
  await visit.save();
  res.send(`<p>Visitas: ${visit.count}</p>`);
});

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`);
});

Este código configura un servidor básico con Express y MongoDB. Cada vez que se visita la ruta raíz ('/'), incrementa el contador de visitas almacenado en la base de datos. 

Esta ultima técnica es la mas común de usar, pero debes tener en cuenta que si tu sitio tiene un alto flujo de usuarios puedes generar un cuello de botella en tu base de datos, lo mas recomendable seria usar una BD en memoria como Redis, para capturar las visitas y luego sincronizarlas con tu base de datos con una tarea programada. 

Conclusión

Hemos visto tres maneras diferentes de implementar un contador de visitas con JavaScript, desde soluciones locales y simples hasta configuraciones más robustas empleando una base de datos. Dependiendo del tráfico esperado en tu sitio web, podrás elegir la técnica que mejor se adapte a tus necesidades.