Diferencia entre Session Storage, Local Storage y Cookies

Bueno este post es básicamente para aclarar dudas respecto a session storage, cookies y local storage que hacen cosas parecidas pero no lo mismo realmente



Session storage



Los datos con sessionStorage son accesibles mientras dura la sesión de navegación.

Los datos no son recuperables si:

1) Se cierra el navegador y se vuelve a abrir.

2) Se abre una nueva pestaña de navegación independiente y se sigue navegando en esa pestaña.

3) Se cierra la ventana de navegación que se estuviera utilizando y se abre otra.

Ejemplo..

// Guardar datos (clave, valor)
sessionStorage.setItem("lastname", "Smith" );

//Leer datos guardados y cargarlos en algun elemento de nuestra pagina (input, párrafo, etc)
document.getElementById("result" ).innerHTML = sessionStorage.getItem("lastname" );

Si te interesa conocer más de Session Storage...

https://www.w3schools.com/jsref/prop_win_sessionstorage.asp


LocalStorage




Con sessionStorage se puede tratar adecuadamente el flujo de información durante sesiones de navegación (por ejemplo, mantener los datos de un carrito de la compra). ¿Pero qué ocurre si quisiéramos almacenar esa información más allá de una sesión y que estuviera disponible tanto si se cierra el navegador y se vuelve a abrir como si se continúa navegando en una ventana distinta de la inicial?

¿Como se usa?? Fácil!

//Almacenamos informacion, esta compuesto por clave-valor
localStorage.setItem("lastname", "Smith" );

// Obtenemos la información almacenada
var apellido =localStorage.getItem("lastname" );

Ver más en...

https://www.w3schools.com/jsref/prop_win_localstorage.asp


Cookies:





1) Las cookies están disponibles tanto en el servidor como en el navegador del usuario, los objetos storage sólo están disponibles en el navegador del usuario.

2) Las cookies se concibieron como pequeños paquetes de identificación, con una capacidad limitada (unos 4 Kb). Los objetos storage se han concebido para almacenar datos a mayor escala (pudiendo comprender cientos o miles de datos con un espacio de almacenamiento típicamente de varios Mb).

Tener en cuenta que de una forma u otra, ni las cookies ni storage están pensados para el almacenamiento de grandes volúmenes de información, sino para la gestión de los flujos de datos propios de la navegación web.

¿Como se usa??

//Almacenamos un nombre de usuario y una fecha de expiración de la sesión
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Otro ejemplo...

//función para crear una cookie

//Utiliza los siguientes parametros
//nombre, valor, expiracion en dias

function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

//funcion para obtener una cookie

function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca;
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}


Si te interesa ver más sobre cookies....

https://www.w3schools.com/js/js_cookies.asp


Y aquí termina el post, los dejo con una canción