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.
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:
Podemos notar como podemos agregar una cantidad de elementos y podemos luego recorrerlos para mostrarlos.
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.
<!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:
Podemos notar como podemos agregar una cantidad de elementos y podemos luego recorrerlos para mostrarlos.
