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.

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.