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.
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.