lunes, 26 de enero de 2015

Tutorial Javascript parte 36 - API HTML5 local storage (alternativa a las cookies)




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

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