Skip to content

Instantly share code, notes, and snippets.

@UlisesGascon

UlisesGascon/agenda_contactos_localstorage.html

Created November 8, 2015 10:16
Show Gist options
  • Save UlisesGascon/cd58db46ffbedc8ad1ba to your computer and use it in GitHub Desktop.
Save UlisesGascon/cd58db46ffbedc8ad1ba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
agenda_contactos_localstorage.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Agenda de Contactos en LocalStorage</title>
<meta charset=utf-8>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<style>
#contenedor {
width: 360px;
}
#gbotones {
margin-bottom: 15px;
}
.input-group {
margin-bottom: 5px;
}
.badge-info {
background-color: #5bc0de;
}
</style>
</head>
<body onload="actualizarDatos()">
<div id="contenedor" class="container">
<header>
<h3>Agenda de contactos
<small> LocalStorage</small>
</h3>
<hr>
</header>
<form class="form-inline">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Nombre" id="nombre" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">0034 - </span>
<input type="text" class="form-control" placeholder="movil" id="movil" aria-describedby="basic-addon1">
</div>
</form>
<hr/>
<div id="gbotones" class="btn-group" role="group" aria-label="...">
<button type="button" onclick="guardarDato()" class="btn btn-info">
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> Guardar
</button>
<button type="button" onclick="recuperarDato()" class="btn btn-success">
<span class="glyphicon glyphicon-floppy-open" aria-hidden="true"></span> Recuperar
</button>
<button type="button" onclick="eliminarDato()" class="btn btn-danger">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Eliminar
</button>
</div>
<button type="button" onclick="eliminarTodo()" class="btn btn-danger">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Eliminar Todos
</button>
<hr>
<ul id="contactos" class="list-group">
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script type="text/javascript">
function guardarDato() {
var nombre = document.getElementById("nombre").value;
var movil = document.getElementById("movil").value;
localStorage.setItem(nombre, movil);
document.getElementById("nombre").value = "";
document.getElementById("movil").value = "";
actualizarDatos();
}
function recuperarDato() {
var nombre = document.getElementById("nombre").value;
localStorage.getItem(nombre);
document.getElementById("movil").value = localStorage.getItem(nombre);
}
function eliminarDato() {
var nombre = document.getElementById("nombre").value;
localStorage.removeItem(nombre);
actualizarDatos();
}
function eliminarTodo() {
localStorage.clear();
actualizarDatos();
}
function actualizarDatos() {
var pares = "";
if (localStorage.length === 0) {
pares += '<li class="list-group-item">Vacío</li>';
} else {
for (var i = 0; i <= localStorage.length - 1; i++) {
var key = localStorage.key(i);
pares += '<li class="list-group-item"><span class="badge badge-info">' + localStorage.getItem(key) + '</span>' + key + '</li>';
}
}
document.getElementById('contactos').innerHTML = pares;
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment