Facebook Twitter Google Digg Reddit Email Imprimir
Miércoles 21 de febrero de 2018
Santoral:
Severino
Otros:
Semana:
08
Día año:
52/365 (14%)
U.F.:
26890.15
IPC:
0,5
Dolar:
595,63
Euro:
735,89
Bitcoin:
U$ 11137.594047619
mindicador.cl
Time4VPS.EU - VPS hosting in Europe

Almacene información localmente en el Navegador

Una alternativa a las cookies con mayor capacidad

Introducción

Tenemos casos en que es conveniente almacenar información en el navegador del usuario, como el nombre de usuario para pre-llenarlo al ingreso, asignar un token de sesión para ofrecer un Permanecer conectado o almacenar localmente un cache. Datos que podrían mantenerse por una sesión o perdurar hasta que sean eliminado explícitamente.

Descripción

HTML5 nos ofrece dos opciones de almacenamiento local desde javascript, permite almacenar hasta 5 MB de información, utilizando codificación base64 por ejemplo podemos almacenar imágenes o audio. Son un paso más avanzado que las cookies.

Éstos datos se acceden mediante 2 objetos:

Para definir una variable, podemos hacerlo de las formas:

Similarmente los datos pueden ser accedidos como:

Finalmente la forma de eliminar un valor es mediante localStorage.removeItem('mivariable');

Ejemplo de Uso

Veamos un caso simple donde solicitamos un nombre de usuario y la almacenamos localmente, utilizando jQuery para facilitar el código:

<html>
  <head>
    <meta charset="UTF-8">
    <title>Prueba de Storage</title>
    <script src="/js/jquery-2.1.0.min.js" type="text/javascript"></script>
    <style>
        #sec1 {
           margin: 10px;
           padding: 10px;
        }
    </style>
    <script>
       $(document).ready(function(){
         if ( localStorage.nombre ) {
            $("#dnombre").text("Su nombre registrado es: " + localStorage.nombre );
         }
         $("#cambiar").click(function(){
             localStorage.nombre = $("#nombre").val();
             $("#dnombre").text("Su nombre fue cambiado a: " + localStorage.nombre );
         }) ;
         $("#borrar").click(function(){
             localStorage.removeItem("nombre") ;
             $("#dnombre").text("Su nombre fue Removido");
         }) ;
         $("#form1").submit(function(e){
              e.preventDefault();
         });
      });
    </script>
  </head>
  <body>
    <div id="sec1">
      <p id='dnombre'>No tenemos registrado su nombre</p>
      <br />
      <form method="POST" id="form1" name="form1">
        <label for="nombre">Ingrese su nombre: </label>
        <input name="nombre" id="nombre" type="text" size="40" />
        <br />
        <input type="button" name="cambiar" id="cambiar" value="Cambiar" />
        <input type="button" name="borrar" id="borrar" value="Borrar" />
    </form>
  </div>    
  </body>
</html>

Podemos analizar el contenido con el navegador Chrome desde la opción Resources de la consola "Herramientas para Desarrolladores"

Escrito por: Luis Hernán de la Barra, 30/07/2015

Generado por Sistema y almacenado en cache

Wyzer
Luis Hernán de la Barra
E-Mail:ldelabar@wyzer.cl
Web:www.wyzer.cl