Persistencia de datos en HTML 5 con localStorage

Gracias a HTML 5, el navegador puede realizar acciones que antes sólo se podían hacer con otras tecnologías. En el caso de la persistencia de datos, dependía de lenguajes del lado del servidor como PHP, JSP o ColdFusion. Aún para almacenar cosas tan simples como una cadena de texto o un número, se debía crear una cookie. Hoy en día hay opciones a través de javascript, que pueden ir desde simplemente almacenar algo mientras la sesión esté abierta, hasta bases de datos.

En este caso veremos una opción intermedia, que se llama localStorage. Este objeto puede almacenar en el navegador diferentes objetos (items), en los que la información puede quedar guardada  por mucho tiempo, hasta que el usuario decida limpiar el cache del navegador o la aplicación la borre. Otra ventaja que tiene con respecto a las cookies es que permite almacenar información más grande.

Guardar datos en localStorage

Si estamos usando los archivos de trabajo, podemos ocupar el documento inicio.html, en el cual están varios botones y un campo de texto.

Escribe tu nombre:<input id="campoNombre"/><br>
<button>Guardar</button>
<button>Mostrar</button>
<button>Borrar</button>
<p id="resultado"></p>

En el primer botón vamos a llamar una función para que al click guarde los datos dentro de localStorage.

<button onClick="guardar()">Guardar</button>

En la etiqueta <head> ponemos el script y declaramos la función guardar().

<script>
function guardar(){
}
</script>

Dentro de la función llamamos al objeto localStorage, que es una propiedad de window. Por cierto, no es necesario escribir window para utilizar localStorage, pero esta vez lo vamos a hacer. Para crear un nuevo ítem se usa el método sabiamente llamado setItem(), en el cual primero tenemos que definir cómo se va a llamar, como es que lo vamos a reconocer. Lo llamaremos “datos”. De segundo parámetro se pone lo que debe guardar, que en este caso será el valor del input campoNombre.

window.localStorage.setItem("datos",campoNombre.value);

Probando esto en el navegador, al hacer click en el botón se guardará lo que previamente escribamos en el campo. Desafortunadamente, hasta el momento no se notará nada en la página. Aunque en la siguiente parte vamos a hacer que se vea lo guardado, si queremos asegurarnos que va funcionando nuestro código, podemos usar las herramientas de desarrollador del navegador. La forma más rápida de acceder a ellas es dando click derecho en alguna parte del documento y seleccionar Inspeccionar Elemento. En este ejemplo utilizaremos Google Chrome.

localStorage01

Dentro de las pestañas que aparecen, seleccionamos la de recursos (Resources). A la izquierda debe mostrar los diferentes tipos de elementos que se pueden almacenar. Seleccionando localStorage y posteriormente los elementos guardados localmente (file://), debe aparecer el ítem que hicimos, con los datos que se escribieron en el campo de texto.

localStorage02




Recuperando los datos

De regreso en el código, pondremos ahora una función desde el segundo botón para que imprima la información de localStore en el párrafo llamado resultado. Dentro del botón declaramos el evento de click.

<button onClick="mostrar()">Mostrar</button>

Y en el script la función, en la que usaremos el método getItem(). Este solamente necesita el nombre del objeto.

function mostrar(){
 resultado.innerHTML = localStorage.getItem("datos");
}

Vale la pena que antes de probarlo en el navegador, lo cerremos primero. Esto con el fin de comprobar que la información no existe en sesión, sino que se guarda permanentemente. Sin escribir algo nuevo en el campo, al apretar el botón debe traer el texto guardado en localStorage.

localStorage03

Borrando la información

En el caso de que ya no nos haga falta el elemento, usando el método removeItem() lo podemos borrar. En el tercer botón llamamos a la función borrar().

<button onClick="borrar()">Borrar</button>

La cual dentro del script tendrá el siguiente código.

function borrar(){
 localStorage.removeItem("datos"); 
}

En el navegador, tras apretar el tercer botón, si posteriormente revisamos los datos almacenados en resources, ya no debe de estar el objeto datos, ni tampoco aparecería si le damos click al botón de mostrar.

En el caso de que hubieran más objetos y quisiéramos borrarlos todos, localStorage cuenta también con el método clear(). Se debe tener mucho cuidado con esta opción, ya que no borra solamente los objetos declarados en un archivo de html, sino todos los que están usándose en un mismo dominio. Por ejemplo si argottraining.com hubiera creado 4 ítems en diferentes archivos, además del usado en este ejercicio, los 5 elementos se borrarían del navegador.




El código final quedó de la siguiente manera.

<!doctype html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Local Storage</title>
<script>
function guardar(){
 window.localStorage.setItem("datos",campoNombre.value);
}
function mostrar(){
 resultado.innerHTML = localStorage.getItem("datos");
}
function borrar(){
 localStorage.removeItem("datos"); 
}
</script>
</head>
<body>
Escribe tu nombre:<input id="campoNombre"/><br>
<button onClick="guardar()">Guardar</button>
<button onClick="mostrar()">Mostrar</button>
<button onClick="borrar()">Borrar</button>
<p id="resultado"></p>
</body>
</html>

Puedes ver el resultado en el navegador. O también se puede descargar el ejercicio desde aquí.

Be the first to comment

Leave a Reply

Your email address will not be published.


*