Como usar el localStorage en Javascript HTML 5

El localStorage es una caracteristica de Javascript que esta dentro de las especificaciones de HTML 5, la cual permite almacenar informacion en el navegador, usando el formato clave => valor.

💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.

El localStorage es una caracteristica de Javascript que esta dentro de las especificaciones de HTML 5, la cual permite almacenar informacion en el navegador, usando el formato clave => valor.

La funcionalidad localStorage sirve para muchas cosas, desde simplemente guardar y luego usar estos datos para por ejemplo que no se pierdan cuando se refresque la pagina o que estos datos persistan cuando se cambia de pagina, dentro del mismo dominio.

Asignar Valores

PAra asignar valores se usa la funcion setItem que lleva dos parametros, la clave y el valor.

La clave es la que usaremos mas adelante para obtener el valor.

localStorage.setItem("my_variable","Valor de la Variable"); // Asignar el valor

Como se puede ver se usa la palabra reservada o funcion “localStorage” que ya viene definida por el lenguaje javascript y se puede ver el contenido desde la consola de desarrollador del navegador (En Google Chrome : Ctrl + Shift + J)

Es posible crear muchas claves, todas las que necesitemos hasta un limite de 5 a 10Mb dependiendo del navegador.

En los valores del localStorage se pueden guardar unicamente texto o datos json, si guardamos un numero este tendria que ser convertido a numero cuando obtengamos el valor.

Si estamos en el mismo dominio como les habia comentado, si cambiamos de pagina se consevaran los datos del storage y podremos acceder a los datos que agregamos en la pagina anterior, esto puede ser util para formularios de 2 o mas pasos.

Obtener Valores

Para obtener valores se usa la funcion getItem dentro del objeto localStorage, y como parametro lleva la clave del elemento que deseamos obtener.

localStorage.getItem("my_variable"); // Obtener el valor
var valor = localStorage.getItem("my_variable"); // Guardar el valor en una variable
console.log(valor); // Imprimir o mostrar el valor

Actualizar valor

Para actualizar un valor existente , solo debemos usar la funcion setItem con la misma clave del valor que queremos actualizar o modificar.

localStorage.setItem("my_variable","Valor de la Variable"); // Valor 1
localStorage.setItem("my_variable","Valor Modificado"); // Valor 2

En el ejemplo se pueden ver la asignacion primera y la segunda asignacion que modifica el valor de la primera.

Eliminar Valores

Para eliminar valores se usa la funcion removeItem del objeto localStorage y lleva como parametro la clave del elemento que queremos eliminar.

localStorage.removeItem("my_variable");

Y listo ya con esto podemos utilizar el localStorage y aplicarlo a alguno sus proyectos.

na.

¿Necesitas un software de ventas listo para producción?

Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.

Ver Inventio Max – Sistema de Inventario y Ventas Profesional →