Almacenar información Local con la API Web Storage de HTML5

Nube Colectiva

hace 10 años

En esta página:

Si bien es cierto la versión actual de HTML5 que ahora conocemos ha tenido muchos cambios en comparación con la versión antigua ahora podemos guardar información local en el navegador con una nueva API que trae HTML5 denominada Web Storage, a continuación explicare de una manera sencilla como usar esta API.

Antes que nada creare una carpeta Blog donde almacenaré todo los archivos correspondientes.

Después de haber creado mi carpeta crearé un archivo llamado home.html donde crearé la vista con relaciones a 02 archivos externos (CSS y JavaScript).


<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8"/>
 <title>Web Storage</title>
 <link rel="stylesheet" type="text/css" href="css/main.css">
 <script src="js/code.js"></script>
</head>
<body>
 <pre>
 <code>
 <h2>Almacenar información con la API Web Storage de HTML5.</h2>
 <div id="container">
 <section id="panelform">
 <form name="frm">
 <p>E-mail<br>
 <input type="email" id="email" placeholder="Ingrese E-mail">
 </p>
 <p>Datos<br>
 <textarea id="datos" placeholder="Ingreso Datos Aqui."></textarea>
 </p>
 <button type ="button" id="save">Save</button>
 </form>
 </section>
 <section id="showdata">
 Aqui se mostraran los datos ingresados.
 </section>
 </div>
 </code>
</pre>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Web Storage</title>

</head>

<body>

<pre>

<code>

<h2>Almacenar información con la API Web Storage de HTML5.</h2>

</p>

<p>Datos<br>

</p>

</form>

</section>

Aqui se mostraran los datos ingresados.

</section>

</div>

</code>

</pre>

</body>

</html>

Ahora dentro de la carpeta Blog, creare una carpeta JS la cual contendrá un archivo llamado code.js y procederemos a codificar.


function start () {
 var button = document.getElementById("save");
 button.addEventListener("click", NewItem, false);
}

function NewItem(){
 var email = document.getElementById("email").value;
 var datos = document.getElementById("datos").value;
 sessionStorage.setItem(email, datos);
 read_data(email);
 document.getElementById("email").value = "";
 document.getElementById("datos").value = "";

}

function read_data(email){
 var show = document.getElementById("showdata");
 show.innerHTML='<div><center><button onclick="deleteall()">Delete All</button></center></div>';
 for(i=0;i<sessionStorage.length;i++){
 var email = sessionStorage.key(i);
 var newvalue = sessionStorage.getItem(email);
 show.innerHTML+='<div>Email: '+ email + '<br>' + 'Datos: '+ datos + '<br><br><center><button onclick="deleteitem(\''+ email + '\')"> Delete</button></center></div';
 }
}window.addEventListener("load", start, false);

function start () {

var button = document.getElementById("save");

button.addEventListener("click", NewItem, false);

}

function NewItem(){

var email = document.getElementById("email").value;

var datos = document.getElementById("datos").value;

sessionStorage.setItem(email, datos);

read_data(email);

document.getElementById("email").value = "";

document.getElementById("datos").value = "";

}

function read_data(email){

var show = document.getElementById("showdata");

show.innerHTML='<div><center><button onclick="deleteall()">Delete All</button></center></div>';

for(i=0;i<sessionStorage.length;i++){

var email = sessionStorage.key(i);

var newvalue = sessionStorage.getItem(email);

show.innerHTML+='<div>Email: '+ email + '<br>' + 'Datos: '+ datos + '<br><br><center><button onclick="deleteitem(\''+ email + '\')"> Delete</button></center></div';

}

}window.addEventListener("load", start, false);

NOTA: Hay dos maneras de guardar la información con Web Storage, las cuales son:

sessionStorage: con este método podremos guardar la data temporalmente; es decir solamente cuando la ventana del navegador se encuentre activa, podremos añadir información usándola de la siguiente manera:


sessionStorage.setItem(email, datos);

sessionStorage.setItem(email, datos);

Y podremos leer de la siguiente manera:


sessionStorage.getItem(email);

sessionStorage.getItem(email);

localStorage: con este método podremos guardar la data permanente; es decir incluso cuando el navegador se cierre la data aun estará disponible, de igual manera podremos añadir información usándola de la siguiente manera:


localStorage.setItem(email, datos);

localStorage.setItem(email, datos);

Y podremos leer de la siguiente manera:


localStorage.getItem(email);

localStorage.getItem(email);

La vista está quedando de esta manera:

Los resultados irían quedando de esta manera:

Como se podrán dar cuenta he añadido un botón general “DeleteAll” que al pulsarlo borraría todo mi contenido, y también un botón “Delete” para cada ítem ingresado claro que al pulsar estos botones se ejecutara una función para cada botón:


function read_data(email){
 var show = document.getElementById("showdata");
 show.innerHTML='<div><center><button onclick="deleteall()">Delete All</button></center></div>';
 for(i=0;i<sessionStorage.length;i++){
 var email = sessionStorage.key(i);
 var newvalue = sessionStorage.getItem(email);
 show.innerHTML+='<div>Email: '+ email + '<br>' + 'Datos: '+ datos + '<br><br><center><button onclick="deleteitem(\''+ email + '\')"> Delete</button></center></div';
 }
}

function deleteall(){
 if (confirm("Estas seguro que deseas eliminar todos los items")) {
 sessionStorage.clear();
 read_data();
 };
}

function deleteitem(clave){
 if (confirm("Estas seguro que deseas eliminar este item")) {
 sessionStorage.removeItem(clave);
 read_data();
 };
}

function read_data(email){

var show = document.getElementById("showdata");

show.innerHTML='<div><center><button onclick="deleteall()">Delete All</button></center></div>';

for(i=0;i<sessionStorage.length;i++){

var email = sessionStorage.key(i);

var newvalue = sessionStorage.getItem(email);

show.innerHTML+='<div>Email: '+ email + '<br>' + 'Datos: '+ datos + '<br><br><center><button onclick="deleteitem(\''+ email + '\')"> Delete</button></center></div';

}

function deleteall(){

if (confirm("Estas seguro que deseas eliminar todos los items")) {

sessionStorage.clear();

read_data();

};

}

function deleteitem(clave){

if (confirm("Estas seguro que deseas eliminar este item")) {

sessionStorage.removeItem(clave);

read_data();

};

}

Bueno eso sería todo espero que les sirva recuerden que esto solamente funciona en la pestaña actual del navegador, en caso lo cierren y vuelvan abrir esto no funcionara ya que estamos usando el método sessionStorage si deseas que la información aun este activa aun cerrando el navegador deberás utilizas el método localStorage.

Puedes descargar el código en nuestro GitHub.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.