Vieites: /* sessionStorage */

2021-01-24T23:28:58Z

sessionStorage

Página nueva

...

== Cookies ==
Las cookies, de nombre más exacto '''HTTP cookies''', es una tecnología que en su día inventó el navegador Netscape, actualmente definida en el estándar [https://tools.ietf.org/html/rfc6265 RFC 6265], y que consiste básicamente en información enviada o recibida en las cabeceras HTTP y que queda almacenada localmente en el lado del cliente durante un tiempo determinado. En otras palabras, es información que queda almacenada en el dispositivo del usuario y que se envía hacia y desde el servidor web en las cabeceras HTTP.

Cuando un usuario solicita una página web, el servidor envía el documento, cierra la conexión y se olvida del usuario. Si el mismo usuario vuelve a solicitar la misma u otra página al servidor, será tratado como si fuera la primera solicitud que realiza. Esta situación puede suponer un problema en muchas situaciones y las ''cookies'' son una técnica que permite solucionarlo.

Con las cookies, el servidor puede enviar información al usuario en las cabeceras HTTP de respuesta y esta información queda almacenada en el dispositivo del usuario. En la siguiente solicitud que realice el usuario la ''cookie'' es enviada de vuelta al servidor en las cabeceras HTTP de solicitud. En el servidor podemos leer esta información y así "recordar" al usuario e información asociada a él.

'''Recuerda:''' Para los ejemplos que aquí aparecen. Si ejecutas un archivo .html 'en local' (no desde un servidor), las cookies no te funcionarán en el Chrome, utiliza el Firefox para probar los códigos.

=== Crear cookies ===
Una ''cookie'' es un ''string'' (cadena de texto) que contiene parejas '''parametro=valor''' separadas por ''';''' de la siguiente forma:
: '''<nombre>=<valor>; expires=<fecha>; max-age=<segundos>; path=<ruta>; domain=<dominio>; secure; httponly;'''

Los parámetros son:
* '''<nombre>=<valor>'''
: Requerido. '''<nombre>''' es el nombre (''key'') que identifica la ''cookie'' y '''<valor>''' es su valor. A diferencia de las ''cookies'' en PHP, en JavaScript se puede crear una ''cookie'' con un valor vacío ('''<nombre>=''').
* '''expires=<fecha>''' y '''max-age=<segundos>'''
: Opcional. Ambos parámetros especifican el tiempo de validez de la cookie. expires establece una fecha (ha de estar en formato UTC) mientras que max-age establece una duración máxima en segundos. max-age toma preferencia sobre expires. Si no se especifica ninguno de los dos se creará una session cookie. Si es max-age=0 o expires=fecha-pasada la cookie se elimina.
* '''path=<ruta>'''
: Opcional. Establece la ruta para la cuál la cookie es válida. Si no se especifica ningún valor, la cookie será válida para la ruta la página actual.
* '''domain=<dominio>'''
: Opcional. Dentro del dominio actual, subdominio para el que la cookie es válida. El valor predeterminado es el subdominio actual. Establecer domain=.miweb.com para una cookie que sea válida para cualqueir subdominio (nota el punto delante del nombre del dominio). Por motivos de seguridad, los navegadores no permiten crear cookies para dominios diferentes al que crea la cookie (same-origin policy).
* '''secure'''
: Opcional. Parámetro sin valor. Si está presente la cookie sólo es válida para conexiones encriptadas (por ejemplo mediante protocolo HTTPS).
* '''HttpOnly'''
: Opcional. Parámetro no disponible en JavaScript ya que crea cookies válidas sólo para protocolo HTTP/HTTPS y no para otras APIs, incluyendo JavaScript.

[https://developer.mozilla.org/es/docs/DOM/document.cookie Aquí puedes ver el resto de parámetros.]

=== La propiedad ''document.cookie'' ===
La propiedad ''document.cookie'' es todo lo que se necesita para trabajar con ''cookies'' del lado del cliente con JavaScript. A través de ella podemos crear, leer, modificar y eliminar ''cookies''. Veamos cada uno de los casos.

* '''Crear ''cookies'''''
: Establecer una ''cookie'' en JavaScript es tan fácil como crear el ''string'' que define la ''cookie'' y asignarlo a ''document.cookie''. Por ejemplo:
: <source lang="javascript">
document.cookie = "nombrecookie=valorcookie; max-age=3600; path=/";
</source>

: Si queremos crear varias ''cookies'', tenemos que hacer este paso una vez para cada una. Por ejemplo, con el siguiente código se crearían las ''cookies'' '''comida_favorita''' y '''color_favorito''':
: <source lang="javascript">
document.cookie = "comida_favorita=arroz; max-age=3600; path=/";
document.cookie = "color_favorito=amarillo";
</source>

: Este comportamiento se debe a que '''document.cookie''' no es un dato con un valor (''data property''), sino una propiedad de acceso con métodos '''set''' y '''get''' nativos (''accessor property''). Cada vez que se le asigna una nueva ''cookie'', no se sobrescriben las ''cookies'' anteriores sino que la nueva se añade a la colección de ''cookies'' del documento.

: Recuerda que las ''cookies'' se envían en las cabeceras HTTP y, por tanto, deben estar correctamente codificadas. Puedes utilizar '''[https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent encodeURIComponent()]''':

: <source lang="javascript">
var testvalue = "Hola mundo!";
document.cookie = "testcookie=" + encodeURIComponent( testvalue );
//testcookie=Hola%20mundo!
</source>

: Si vas a utilizar el parámetro '''expires''', recuerda que ha de ser una fecha en formato '''UTC'''. Te puede ser de ayuda el método [https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/toUTCString Date.toUTCString()]. Por ejemplo, una ''cookie'' con caducidad para el 1 de Febrero del año 2068 a las 11:20:

: <source lang="javascript">
var expiresdate = new Date(2068, 1, 02, 11, 20);
var cookievalue = "Hola Mundo!";
document.cookie = "testcookie=" + encodeURIComponent( cookievalue ) + "; expires=" + expiresdate.toUTCString();
</source>

: Un modo alternativo de indicar la duración de la ''cookie'' es utilizando el parámetro '''max-age=duración-máxima-en-segundos''', por ejemplo: 60*60*24*365 para un año.

: Por último, en relación a la duración de las '''cookies''' antes de que el navegador las borre, debes saber que si no se específica fecha de caducidad o no se especifica su duración la ''cookie'' será válida sólo para la sesión actual.

* '''Modificar ''cookies'''''
: Como vimos ahora, cada vez que se asigna una ''cookie'' a ''document.cookie'', esta es añadida a la colección de ''cookies'' del documento. Esto es verdad excepto si la ''cookie'' asignada tiene un identificador que ya existe. En este caso se modifica la ''cookie'' existente en lugar de añadir una más.

: Por ejemplo, podemos crear la siguiente ''cookie'' con identificador nombre y valor Miguel:
: <source lang="javascript">
document.cookie = "nombre=Miguel";
</source>

: Si queremos modificar el valor, por ejemplo cambiarlo por Juan:
: <source lang="javascript">
document.cookie = "nombre=Juan";
</source>

: Es importante tener en cuenta que si una ''cookie'' se crea para un dominio o para un ''path'' determinado y se quiere modificar, el dominio y el ''path'' han de coincidir. De lo contrario se crearán dos ''cookies'' diferentes válidas para cada ''path'' y dominio. Por ejemplo, imaginemos que estamos en «miweb.com/blog» (el valor predeterminado del ''path'' es en este caso '''/blog'''):
: <source lang="javascript">
// Supongamos que estamos en "miweb.com/blog"
// y creamos las siguientes cookies

// Creamos la cookie para el path "/"
document.cookie = "nombre=Miguel; path=/";

// Con la siguiente linea se crea una nueva cookie para el path "/blog" (valor por defecto)
// pero no se modifica la cookie "nombre" anterior porque era para un path diferente
document.cookie = "nombre=Juan";

// Con la siguiente línea SI se modifica la cookie "nombre" del path "/" correctamente
document.cookie = "nombre=Juan; path=/";
</source>

* '''Eliminar ''cookies'''''
: Para eliminar una ''cookie'' desde JavaScript se debe asignar una fecha de caducidad ('''expires''') pasada o un '''max-age''' igual a cero. En ambos casos da igual el valor que se le asigne a la ''cookie'' porque se eliminará pero ha de darse el nombre de la ''cookie'' aunque sea sin valor.

: Por ejemplo, creamos la ''cookie'' con el identificador '''nombre''' y valor '''Miguel''' igual que antes:
: <source lang="javascript">
document.cookie = "nombre=Miguel";
</source>

: Si queremos eliminarla:
: <source lang="javascript">
document.cookie = "nombre=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

// O con max-age
document.cookie = "nombre=; max-age=0";
</source>

: Al igual que ocurría con la modificación de ''cookies'', para la eliminación el '''path''' y el '''domain''' también tienen que coincidir:
: <source lang="javascript">
// Se crean dos cookies con el mismo identificador
// para dos paths diferentes
document.cookie = "nombre=Miguel; path=/noticias";
document.cookie = "nombre=Juan; path=/blog";

// Solo se elimina la cookie del path /noticias
document.cookie = "nombre=; max-age=0; path=/noticias";
</source>

* '''Leer y obtener el valor de las ''cookies'''''
: Puede que obtener el valor sea el paso más tedioso de trabajar con ''cookies'' en JavaScript, y es que no hay un método de lectura directo para cada ''cookie'' individual. Sólo se puede obtener un ''string'' con todas las ''cookies'' válidas para el documento y manipular el ''string'' hasta encontrar el nombre y valor de la ''cookie'' que queremos.

: El ''string'' con todas las ''cookies'' se obtiene del siguiente modo:
: <source lang="javascript">
var lasCookies = document.cookie;
</source>

: Y tiene el siguiente formato:
: '''"cookie1=valor1;cookie2=valor2;cookie3=valor3[;...]"'''

: Fijarse en que:
:* El ''string'' sólo contiene pares de nombre de la ''cookie'' y su valor. No se puede acceder a otros parámetros a través de ''document.cookie''.
:* Sólo se obtienen las ''cookies'' válidas para el documento actual. Esto implica que ''cookies'' para otros ''paths'', dominios o ''cookies'' caducadas no se pueden leer. Aunque en una página puedan crearse ''cookies'' para otros subdominios y ''paths'', sólo se pueden leer las que san válidas para el subdominio y ''path'' actual.

=== Ejemplo sencillo de creación y lectura de ''Cookies'' ===
En este ejemplo tenemos un botón y una etiqueta. Se crea una cookie que guarda las veces que pulsamos el botón en cada sesión del navegador. El numero de pulsaciones se mostrará en un elemento '''label'''.
* '''HTML'''
<source lang='html'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba cookie</title>
</head>
<body>

<input type="button" id="boton" value="Pulsa">
<label id="labelContador">0</label>

<script src="script.js"></script>
</body>
</html>
</source>

* '''JavaScript'''
<source lang="javascript">
//Iniciamos la cookie para esta sesión
document.cookie = "pulsados=0; SameSite=None; Secure;";
//console.log(document.cookie);

function alertCookie() {
//Creamos un diccionario con el contenido de la Cookie
let dCookie = {};
const laCookie = document.cookie; // La cookie en formato string
const aCookie = laCookie.split(";"); // Array de pares clave=valor existentes en la cookie
console.log(aCookie);
for (let i = 0; i < aCookie.length; i++) { // Llenamos el diccionario con los pares clave:valor
dCookie[aCookie[i].split('=')[0].trim()] = aCookie[i].split('=')[1].trim();
}
//console.log('El diccionario: ');
//console.log(dCookie);

//Cambiamos contenido de la Cookie
dCookie['pulsados'] = parseInt(dCookie['pulsados']) + 1;
textoCookie = 'pulsados=' + dCookie['pulsados'] + '; SameSite=None; Secure;';
document.cookie = textoCookie;
// console.log(document.cookie);

//Mostramos en la 'label' el número de veces que se pulsó el botón al recargar la web
document.getElementById('labelContador').innerText = dCookie['pulsados'];
}

//Añadimos un escuchador al evento click para el botón de la web
document.getElementById('boton').addEventListener('click',alertCookie,false);

</source>

=== Enlaces externos interesantes sobre ''cookies'' ===
* [https://developer.mozilla.org/es/docs/DOM/document.cookie Cookies en developer Mozilla]
* [https://cybmeta.com/que-son-las-cookies-y-como-funcionan Introducción a las cookies]
* [https://javascript.info/cookie Funciones de manejo de cookies]
* [https://www.aepd.es/sites/default/files/2020-07/guia-cookies.pdf Guía sobre uso de cookies AEPD]

== LocalStorage ==
El mecanismo de almacenamiento DOM es el medio a través del cual pares de clave/valor pueden ser almacenadas de forma segura para ser recuperadas y utilizadas más adelante. La meta de este añadido es suministrar un método exhaustivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "sin conexión" durante largos períodos de tiempo).

El almacenamiento DOM está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las ''cookies''.

'''[https://developer.mozilla.org/es/docs/Web/API/Window/localStorage LocalStorage]''' y '''[https://developer.mozilla.org/es/docs/Web/API/Window/sessionStorage sessionStorage]''' son propiedades de HTML5, que permiten almacenar datos en nuestro navegador web. De manera muy similar a como lo hacen las ''cookies''.

* '''Local Storage'''
: Guarda información que permanecerá almacenada por tiempo indefinido; sin importar que el navegador se cierre.

* '''Session Storage'''
: Almacena los datos de una sesión y éstos se eliminan cuando el navegador se cierra.

Las características de Local Storage y Session Storage son:
* Permiten almacenar entre 5MB y 10MB de información; incluyendo texto y multimedia.
* La información está almacenada en la computadora del cliente y NO es enviada en cada petición del servidor, a diferencia de las ''cookies''.
* Utilizan un número mínimo de peticiones al servidor para reducir el tráfico de la red.
* Previenen pérdidas de información cuando se desconecta de la red.
* La información es guardada por domino web (incluye todas las páginas del dominio).

Los datos de almacenamiento DOM se eliminan junto con la memoria caché sin conexión cuando se hace clic en el botón Eliminar.

=== Ejemplo LocalStorage ===
En el siguiente ejemplo se muestra como se pueden almacenar en local dos '''clave=valor''' y luego leerlas. Primero ingresamos los datos y los guardamos. Después, cerraremos y abriremos nuevamente la pestaña o ventana nuestro navegador, daremos ''clic'' en "cargar elementos" y nos daremos cuenta de que los datos que almacenamos inicialmente siguen ahí, gracias a la propiedad de '''LocalStorage'''.

* '''HTML'''
<source lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo LocalStorage</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

</head>

<center><h1>Ejemplo - localStorage</h1>

<input type="text" placeholder="Nombre" id="nombretxt"><br><br>
<input type="text" placeholder="Apellido" id="apellidotxt"><br><br>
<button id="boton-guardar">Guardar</button><br>

<hr />
Nombre almacenado:
<label type="text" id="nombrelabel"></label><br>
Apellido almacenado:
<label "text" id="apellidolabel"></label><br>

<button id="boton-cargar">
Cargar elementos
</button>
</center>

<hr />

<script src="script.js"></script>

</body>
</html>
</source>

* '''JavaScript'''
<source lang="javascript">
function guardar() {
// Leemos los datos escritos en los inputs
const nom = document.getElementById('nombretxt').value;
const apel = document.getElementById('apellidotxt').value;

// Guardamos los datos en el LocalStorage
localStorage.setItem('Nombre', nom);
localStorage.setItem('Apellido', apel);

// Limpiamos los inputs una vez leídos
document.getElementById('nombretxt').value = "";
document.getElementById('apellidotxt').value = "";
}

function cargar() {
// Obtener los datos almacenados
const nom = localStorage.getItem('Nombre');
const ape = localStorage.getItem('Apellido');

// Mostramos los datos almacenados
document.getElementById('nombrelabel').innerText = nom;
document.getElementById('apellidolabel').innerText = ape;

}

document.getElementById('boton-guardar').addEventListener('click', guardar, false);
document.getElementById('boton-cargar').addEventListener('click', cargar, false);
</source>

: '''Nota:''' Si queremos guardar un un array o un JSON, recuerda que localStorage solo trabaja con texto, así:
<source lang="javascript">
// Creamos un array
var arrayNombres = ['ana', 'manuel', 'patricia', 'daniel'];
// Guardamos el array pero en formato texto
localStorage.setItem("nombres", JSON.stringify(arrayNombres));
//...
// Ya podemos leer los datos guardados en local
var arrayNGuardados = JSON.parse(localStorage.getItem("nombres"));
</source>

=== sessionStorage ===
Este es un objeto global ('''[https://developer.mozilla.org/es/docs/DOM/Almacenamiento sessionStorage]''') que mantiene un área de almacenamiento que está disponible durante la sesión de página. Una sesión de página existe mientras el navegador esté abierto y sobrevive a recargas o restauraciones de páginas. Abrir una página en una nueva pestaña o en una ventana provoca que se cree una nueva sesión.

<source lang="javascript">
// Guardar datos en el almacén de la sesión actual
sessionStorage.setItem("username", "John");

// Acceder a algunos datos guardados
console.log( "username = " + sessionStorage.getItem("username"));
</source>

El objeto '''sessionStorage''' es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.

Para ver el funcionamiento se puede emplear el ejemplo anterior simplemente cambiando '''localStorage''' por '''sessionStorage'''.

Ejemplo con '''sessionStorage''':
* '''HTML'''
<source lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage</title>
</head>
<body>
<h1>Pruebas con Local Storage</h1>

<form action="#" id="formulario">
<label for="clave">Clave : </label><input type="text" name="clave" id="clave"><br>
<label for="valor">Valor : </label><input type="text" name="valor" id="valor"><br>
<input type="submit" value="Guardar" id="guardar">
</form>
<div id="info">
<select name="claves" id="claves">
<option value="porDefecto">Selecciona clave</option>
</select>
<p id='infoValor'></p>
</div>

<script src="scripts.js"></script>
</body>
</html>
</source>
* '''JavaScript'''
<source lang="javascript">

const formulario = document.getElementById('formulario');
const claves = document.getElementById('claves');
const infoValor = document.getElementById('infoValor');

formulario.addEventListener('submit', e => {
e.preventDefault();

const clave = formulario.clave.value;
const valor = formulario.valor.value;

sessionStorage.setItem(clave, valor);
claves.innerHTML += `<option>${clave}</option>`;

formulario.reset();

claves.addEventListener('change', () => {
const contenido = sessionStorage.getItem(claves[claves.selectedIndex].textContent);
console.log(contenido);
infoValor.textContent = contenido;

})

});
</source>

[[JavaScript|Volver]]

Almacenamiento local en JavaScript - Historial de revisiones

Vieites: /* sessionStorage */