El Local Storage o también conocido como Web storage o DOM storage es una caractersitica añadida en HTML5 que nos permite guardar información en el navegador del cliente. Esa información va a permanecer ahí hasta que el usuario borre el historial del navegador.
Aunque el servidor se reinicie los datos van a seguir disponibles. Pero si el mismo usuario abre otro navegador distinto y entra a la misma página ya no van a estar ya que se guarda en el navegador inicial.
El Session Storage es exactamente lo mismo que el local storage solo que no perdura, cuando el usuario cierra la ventana del navegador, los datos se borran.
Se basa en utilizar la palabra reservada localStorage o sessionStorage junto con 3 métodos básicos.
- Crear: setItem
- Eliminar: removeItem
- clear
- Mostrar: getItem
Para poder ver tanto el localStorage como el sessionStorage vamos a la consola de nuestro navegador. En Chrome pulsamos [Ctrl] + [Mayus] + [I] y vamos a la pestaña de Aplicación (Application). En la parte izquierda podremos ver el Storage.
Ahora volvemos a la consola. Con set Item creas las llave – valor.
localStorage.setItem("nombre","Luis");
Con remove Item borras esa llave en concreto y su valor. También podemos utilizar clear para borrar todas las llaves y sus valores.
localStorage.removeItem("nombre");
localStorage.clear();
Y con get Item podemos ver el valor de la llave que especifiquemos.
localStorage.getItem("nombre");
¿Es una alternativa a las bases de datos o las cookies?
Depende. Local Storage solo permite guardar cadenas de texto, esto limita mucho. También tiene el limite de tamaño. Y además no tienen seguridad ninguna, el texto se almacena en el propio navegador del usuario así que no podemos guardar ninguna información privada como contraseñas.
Es una buena alternativa a guardar datos sencillos en cookies ya que nos permite almacenar entre 5 MB (en el navegador Firefox) hasta 10 MB (en Chrome y en Internet Explorer), mucho más de lo 4KB de las cookies. Además local storage no se envía con cada solicitud HTTP a diferencia de las cookies, lo que nos puede ahorrar ancho de banda.
Pero tienes que pensar en la arquitectura de tu aplicación.
- Utilizar Local Storage cuando los datos van a ser tratados directamente en el Javascript. Para evitar el consumo de ancho de banda.
- Utilizar Cookies cuando los datos van a ser tratados en el servidor. Para evitar el reenvió de datos.
- Utilizar una base de datos cuando el volumen de datos y la complejidad sea alta.
Un ejemplo de Local Storage es para almacenar los elementos de un carrito de compras en nuestra web.
