Obtener una cookie por nombre en JavaScript
Las cookies son piezas de información que se guardan en su computadora en forma de archivos de texto muy pequeños. Cuando un servidor web ha terminado de enviar una página web a un navegador, la conexión entre los dos se corta y el servidor olvida rápidamente cualquier información sobre el usuario.
Las cookies se desarrollaron primero como una solución a la cuestión de Cómo recordar información sobre el usuario
por las siguientes razones.
- El nombre de un usuario se puede guardar en una cookie cada vez que esa persona visita un sitio web en particular.
- Cuando el usuario regrese al sitio web más tarde, la cookie “recordará” su nombre.
Lo primero que haremos será construir una función, a la que llamaremos getACookie
, y usaremos cookieName
como argumento del método.
Obtener una cookie por nombre en JavaScript
A continuación, crearemos una variable a la que nos referiremos como nameOfCookie
y la rellenaremos con el texto que buscará cookieName + '='
.
let nameOfCookie = cookieName + '=';
Ahora que hemos creado una nueva variable con el nombre cookieDecoded
, decodificaremos la cadena de cookies utilizando la propiedad decodeURIComponent
.
Anteriormente, habíamos usado document.cookie
para recuperar todas las cookies para procesar cualquier carácter especial, como $
, pero ahora usaremos esta nueva variable en su lugar.
Mediante el uso de la cookie de propiedad Documento
, es posible leer y escribir cookies que están conectadas con el documento. Es un getter y setter para los valores reales de las cookies que se almacenan.
let cookieDecoded = decodeURIComponent(document.cookie);
Cree una nueva variable llamada cookieArray
que contendrá la matriz producida después de usar la propiedad .split(';')
para separar la cookie en una matriz en ;
personaje.
let cookieArray = cookieDecoded.split(';');
Avanzando más, iteraremos a través del cookieArray
.
for (let i = 0; i < cookieArray.length; i++) ```
Dentro del bucle, crearemos una nueva variable a la que nos referiremos como `cIndex`. Esta variable contendrá el valor del índice específico de `cookieArray` que determinará el valor de `i`.
```javascript
let cIndex = cookieArray[i];
El atributo charAt()
iniciará un bucle while
que examinará el valor del carácter ubicado en el índice 0 de la matriz cIndex
para determinar si está vacío o no.
while (cIndex.charAt(0) == ' ') ```
Si el primer índice de `cIndex` está vacío, entonces el valor en el segundo índice se almacenará en la variable `cIndex` usando la propiedad `subString()`.
```javascript
cIndex = cIndex.substring(1);
Si el valor que recibimos de la expresión cIndex.indexOf(nameOfCookie)
es igual a cero, entonces se cumplirá nuestra condición y devolveremos el valor obtenido de cIndex
.
if (cIndex.indexOf(nameOfCookie) == 0) ```
<!--adsense-->
Si la condición se evalúa como `verdadera`, devolveremos el valor de la cookie, que está representado por la `función c.subcadena (nombre.longitud, c.longitud)`. Además, si la condición resulta ser `falsa`, devolveremos una cadena vacía.
```javascript
{ return cIndex.substring(nameOfCookie.length, cIndex.length); }
return '';
Código fuente completo:
function getACookie(cookieName) {
let nameOfCookie = cookieName + '=';
let cookieDecoded = decodeURIComponent(document.cookie);
let cookieArray = cookieDecoded.split(';');
for (let i = 0; i < cookieArray.length; i++) {
let cIndex = cookieArray[i];
while (cIndex.charAt(0) == ' ') {
cIndex = cIndex.substring(1);
}
if (cIndex.indexOf(nameOfCookie) == 0) {
return cIndex.substring(nameOfCookie.length, cIndex.length);
}
}
return '';
}
I am Waqar having 5+ years of software engineering experience. I have been in the industry as a javascript web and mobile developer for 3 years working with multiple frameworks such as nodejs, react js, react native, Ionic, and angular js. After which I Switched to flutter mobile development. I have 2 years of experience building android and ios apps with flutter. For the backend, I have experience with rest APIs, Aws, and firebase. I have also written articles related to problem-solving and best practices in C, C++, Javascript, C#, and power shell.
LinkedIn