local storage nos permite almacenar datos localmente en el navegador del cliente, es una altenativa más segura al uso de cookie, ya que éstas para ser creadas es necesario realizar peticiones al servidor, local storage también favorecen el rendimiento del sitio web. #javascript #html5
storagePolyfill.js: https://gist.github.com/jarrodirwin/0ce4c0888336b533b2c4/download#
Documentación: http://www.w3schools.com/html/html5_webstorage.asp
storagePolyfill.js: https://gist.github.com/jarrodirwin/0ce4c0888336b533b2c4/download#
Documentación: http://www.w3schools.com/html/html5_webstorage.asp
Código de ejemplo. localstorage.html ...
<!DOCTYPE html>
<html>
<head>
<title>API HTML5 localStorage - Almacenamiento Local</title>
<meta charset="utf-8">
<script type="text/javascript" src="storagePolyfill.js"></script>
<script>
window.onload = function(){
var btn1 = document.getElementById("btn-1");
btn1.onclick = function(){
var nombre = document.getElementById("nombre").value;
localStorage.setItem("nombre", nombre);
//localStorage.nombre = nombre;
//sessionStorage sólo una vez, los datos se pierden cuando el navegador se cierra
document.getElementById("resultado-1").innerHTML = localStorage.getItem("nombre");
//localStorage.nombre
}
var btn2 = document.getElementById("btn-2");
btn2.onclick = function(){
localStorage.removeItem("nombre");
document.getElementById("resultado-1").innerHTML = "Datos eliminados correctamente";
}
}
</script>
</head>
<body>
<form method="post">
Nombre: <input type="text" name="nombre" id="nombre" placeholder="Introduce tu nombre">
<button type="button" id="btn-1">Enviar</button>
<button type="button" id="btn-2">Eliminar datos</button>
</form>
<div id="resultado-1"></div>
</body>
</html>
Vídeo tutorial de Javascript en Youtube
No hay comentarios:
Publicar un comentario