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.