El almacenamiento web es un mecanismo en javascript que permite a los navegadores o browsers almacenar información en las máquinas de los internautas.. digamos que es como una cookie, pero su funcionamiento es un poco más complejo, más claro y más poderoso.
Utilizar éstos métodos es sumamente sencillo ya que forman parte del objeto window del navegador y su sintaxis de uso es de la siguiente manera:
window.localStorage['test'] = "Jackfiallos"; console.log(window.localStorage['test']); // output: Jackfiallos window.sessionStorage['test'] = "Qbit Mexhico"; console.log(window.sessionStorage['test']); // output: Qbit Mexhico |
Las diferencias entre localStorage y sessionStorage por implementación no varían como pueden ver en el ejemplo, pero su vida o tiempo de almacenamiento es muy diferente. La propiedad localStorage hace que su valor prevalezca aunque el navegador se haya cerrado y la computadora se haya apagado.. digamos que deja una copia de los datos en la base de datos local del navegador y claro, estos datos se pueden eliminar cuando se borra la caché del navegador.. en cambio la propiedad sessionStorage solamente se mantiene viva mientras el usuario mantenga abierto el navegador o la pestaña donde se ha inicializado la propiedad, es el equivalente a una variable de sesión en el servidor.
Sobre los métodos disponibles en estas propiedades tenemos:
– getItem(clave): obtener el valor de un elemento
– setItem(clave, valor): setear el valor de un elemento
– removeItem(clave): elimina un elemento de la lista
– clear(): elimina todos los elementos de la lista
– key(i): nos brinda el nombre de una clave específica, para usarlo es necesario hacerlo utilizando un ciclo
– length(): número de elementos contenidos en la lista
estos métodos aplican tanto para localStorage como para sessionStorage.
En cuanto a la seguridad, los valores contenidos en estas propiedades solamente pueden ser accedidos a través del mismo origen.. me refiero solamente utilizando la misma url por ej.. http:qbit.com.mx es diferente de https://qbit.com.mx o igualmente diferente que http://qbit.com.mx/blog .. por lo que las verificaciones de seguridad no se realizan a nivel de dominio.
Entonces ahora que las aplicaciones SPA “single page applications” están de moda, utilizar local y session storage, permite una mayor personalización de estas aplicaciones sin tener que utilizar almacenamiento en el servidor, espero que de algo les sirva esta explicación.
Más información o referencia la pueden encontrar en este enlace http://www.w3.org/TR/webstorage/
Happy coding 😀