Cargando

Ir a contenido

X

 


HTML5 - Almacenamiento en el Browser

En este tutorial veremos los aspectos que más resaltan de utilizar este tipo de almacenamiento con la finalidad de añadir la funcionalidad de persistencia de datos durante el uso de la página web en HTML5 por parte de los usuarios.


Escrito por el mar 23 2014 04:36


Al trabajar con páginas web hay veces en las que necesitamos utilizar datos que persistan durante la navegación del usuario, sin embargo no queremos o no podemos utilizar bases de datos, entonces para ello podemos utilizar el almacenamiento en el navegador.

Almacenamiento en el Navegador

El navegador nos permite almacenar una cantidad de datos considerables con las diferentes herramientas que nos da HTML5, la decisión de usar uno u otro pasa por definir que queremos realizar.

De los diferentes tipos de almacenamiento que podemos utilizar vamos a destacar el almacenamiento local, con este tipo de almacenamiento podemos guardar diferentes asociaciones de llave – valor con las cuales podremos mantener una persistencia de datos del usuario en su equipo local desde donde accede a la página HTML5.

Almacenamiento Local

Para utilizar el almacenamiento local dependemos de la propiedad global localStorage, dicha propiedad nos retorna un objeto Storage en cual tendremos las diferentes asociaciones llave – valor que mencionamos anteriormente.

Cuando decidimos trabajar con este tipo de almacenamiento podremos contar con sus diferentes métodos para poder construir las funcionalidades que necesitamos, por ello debemos conocerlos, veamos a continuación los métodos con los que contamos en este tipo de almacenamiento local.
  • clear(): Este método nos permite limpiar todas las asociaciones almacenadas en nuestro objeto.
  • getItem(<key>): Nos permite obtener el valor de la asociación utilizando una llave que le pasamos como parámetro.
  • key(<index>): Nos permite obtener la llave de la asociación utilizando su posición para ello.
  • length: Nos indica la cantidad de elementos llave - valor que tenemos almacenados al momento.
  • removeItem(<key>): En vez de borrar todos los elementos con clear(), con este método podemos eliminar elementos específicos utilizando su llave como identificador.
  • setItem(<key>, <value>): Este método nos permite agregar una nueva asociación o actualizar una si la llave que colocamos ya existe.
  • [<key>]: Nos permite acceder al contenido de una de las asociaciones en forma de arreglo o array.
Muy bien ahora que conocemos los métodos con los que contamos, vamos a realizar un código de demostración con el cuál aprenderemos a utilizar el almacenamiento local:

<!DOCTYPE HTML>
<html>
<head>
	 <title>Ejemplo</title>
	 <style>
		 body > * {float: left;}
		 table {border-collapse: collapse; margin-left: 50px}
		 th, td {padding: 4px;}
	 	th {text-align: right;}
		 input {border: thin solid black; padding: 2px;}
		 label {min-width: 50px; display: inline-block; text-align: right;}
		 #countmsg, #buttons {margin-left: 50px; margin-top: 5px; margin-bottom: 5px;}
	 </style>
</head>
<body>
<div>
		 <div><label>Llave:</label><input id="key" placeholder="Ingrese la llave"/></div>			
		 <div><label>Valor:</label><input id="value" placeholder="Ingrese el valor"/></div>
		 <div id="buttons">
			 <button id="add">Agregar</button>
			 <button id="clear">Limpiar</button>
		 </div>
		 <p id="countmsg">Hay <span id="count"></span> Elementos</p>
	 </div>
	 <table id="data" border="1">
		 <tr><th>Elementos:</th><td id="count">-</td></tr>
	 </table>
	 <script>		
		 displayData(); 	
		 var buttons = document.getElementsByTagName("button");
		 for (var i = 0; i < buttons.length; i++) {
			 buttons[i].onclick = handleButtonPress;
		 }
		 function handleButtonPress(e) {
			 switch (e.target.id) {
			 	case 'add':
					 var key = document.getElementById("key").value;
					 var value = document.getElementById("value").value;
					 localStorage.setItem(key, value);
			 		 break;
				 case 'clear':
					 localStorage.clear();
					 break;
			 }
			 displayData();
		 }
		 function displayData() {
			 var tableElem = document.getElementById("data");
			 tableElem.innerHTML = "";
			 var itemCount = localStorage.length;
			 document.getElementById("count").innerHTML = itemCount;
			 for (var i = 0; i < itemCount; i++) {
				 var key = localStorage.key(i);
				 var val = localStorage[key];
				 tableElem.innerHTML += "<tr><th>" + key + ":</th><td>"
					 + val + "</td></tr>";	
			 }
		 }
	 </script>
</body>
</html>

En este ejemplo hemos construido una funcionalidad que nos permite escribir valores en campos de tipo input text y luego mediante funciones poder almacenar estos valores de forma local.

Veamos como luce esto en nuestro navegador:



html5_almac_navegador.jpg


Podemos notar como podemos agregar una cantidad de elementos y podemos luego recorrerlos para mostrarlos.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
8
VOTA
5
0%
4
100%
3
0%
2
0%
1
0%

  Información

  •   Publicado mar 23 2014 04:36
  •   Actualizado mar 23 2014 15:35
  •   Visitas 590