Guarda datos de manera local para tu aplicación web sin una base de datos con LocalStorage
localStorage(almacenamiento local) es lo mismo que sessionStorage(almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones.
Aquí les dejamos un ejemplo de como funciona:
<!DOCTYPE html>
<html>
<body>
<h2>Formulario LocalStorage</h2>
<label for="fname">Nombre:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname">
<p><input type="button" id="Create" value="Guardar">
<input type="button" id="Read" value="Consultar">
<input type="button" id="Update" value="Modificar">
<input type="button" id="Delete" value="Eliminar">
</p>
</body>
<script type="text/javascript">
var lStorage = window.localStorage;
window.onload = function(){
var c = document.getElementById('Create');
var r = document.getElementById('Read');
var u = document.getElementById('Update');
var d = document.getElementById('Delete');
c.onclick = function () {
var name = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
lStorage.setItem('Nombre', name);
lStorage.setItem('Apellido', lname);
alert('Elmentos Guardados');
};
r.onclick = function () {
var name = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
if ((name != '' && name != null) || (lname != '' && lname != null)) {
sname = lStorage.getItem('Nombre');
slname = lStorage.getItem('Apellido');
if (name == sname || slname == lname) {
alert(lStorage.key(1)+': ' + sname + ' Apellido: ' + slname);
} else { alert('Datos no encontrado'); }
}
else { alert('Datos no encontrado');}
}
u.onclick = function () {
var name = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
if (name != '' && name != null) {
lStorage.setItem('Nombre', name);
}if(lname != '' && lname != null){
lStorage.setItem('Apellido', lname);
}
else{
alert('No pudo actualizar elementos');
}
};
d.onclick = function () {
//lStorage.removeItem("Nombre");
lStorage.clear();
alert('Datos Eliminados');
};
};
</script>
</html>
y aquí un video para que vean con mas detalle como utilizar cada instrucción :
Comentarios
Publicar un comentario