Zeni
  • Inicio
  • Blog
  • Trabajos
  • Sobre mí
  • Contacto
Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado
 

Almacenamiento con HTML5, Web Storage

Escrito por Alfredo
::
[Jueves, 20 Septiembre 2012 09:19]
Última actualización por Alfredo
::
[Lunes, 29 Abril 2013 20:01]
Average rating
  • 1
  • 2
  • 3
  • 4
  • 5
9 Almacenamiento con HTML5, Web Storage /blog/11-html/9-almacenamiento-con-html5-web-storage
Click to subscribe

Con el nuevo estándar de HTML, en su versión 5 se ha implementado un nuevo modo de almacenamiento que sustituye a las antiguas cookies que nos han estado acompañando hasta las versiones más recientes de los navegadores.

Cuando en nuestros primeros años de programación de la web, para saber las preferencias sobre nuestro sitio de un usuario o cuando simplemente queríamos guardar algún dato relevante sobre la elección de un cliente incluso cuando este apagara el navegador utilizábamos dicha tecnología, las cookies.

Para al que a día de hoy no sepa lo que es una cookie, les diré que a grandes rasgos se trata de un fichero plano de texto que se guarda en nuestro disco duro con la información que el propio programador quiere almacenar sobre unos determinados parámetros del visitante. Dicho fichero debía ocupar muy poco espacio (alrededor de unos pocos KB) que posteriormente el propio navegador leía e interpretaba.

A día de hoy, con el recien llegado HTML5 y las nuevas versiones de los navegadores, incorporan lo que podríamos denominar las cookies 2.0 o lo que es lo mismmo el Storage que permite un almacenamiento en el navegador de hasta 5MB. Existen 2 tipos de almacenamiento, el localStorage y el sessionStorage, pero de ellos hablaré más adelante.

En la actualidad, los únicos navegadores que admiten el Web Storage son: Firefox, Oprea, Chrome, Safari y versiones superiores a IE8.

Como anunciabamos anteriormente, existen dos tipos de almacenamiento (localStorage y sessionStorage). La diferencia que existe entre ambos es que en el primer caso, los datos que se almacenan en el navegador son permanentes hasta que se limpia la caché, mientras que en el segundo tipo los datos son eliminados cuando se cierra la sesión en el navegador

Para saber si nuestro navegador soporta el Web Storage se puede realizar un simple ejemplo con javascript:

window.onload = function() {
    //Se puede emplear tanto el objeto localStorage como sessionStorage
    if(localStorage){
        //Existe el localStorage y podemos hacer almacenamiento
        alert("Si tienes LocalStorage");
    } else {
        //No existe localStorage
        alert("No tienes LocalStorage");
    }
}

Si ya sabemos si nuestro navegador soporta o no el almacenamiento de contenido, el acceso a él es muy sencillo, basta con utilizar el objeto localStorage de la siguiente manera:

localStorage.setItem("nombreVariable", "valorVariable");

Una vez que ya se ha insertado una variable con valor, para acceder a ella deberemos insertar la siguiente línea:

localStorage.getItem("nombreVariable");

Pero si lo que queremos es tener un listado de todas las variables almacenadas por nuestro navegador, tendremos que incluir el siguiente fragmento:

for (x=0; x<=localStorage.length-1; x++){
    //conseguimos la clave de la posicion
    clave = localStorage.key(x);
    //conseguimos el dato através de la clave
    //tendríamos que introducir algo para imprimir lo que obtenemos a continuación
    localStorage.getItem(clave);
}

Y para finalizar, si lo que queremos tal vez sea limpiar un dato en concreto o vaciar la caché completa, se pueden utilizar los códigos que acontinuación se exponen:

    //Para eliminar una variable en concreto
    localStorage.removeItem("usuario");
    //Para vaciar la caché completa
    localStorage.clear();

Espero que estos consejos con ejemplos prácticos sirvan para ayudaros a elaborar y entender el funcionamiento del Web Storage, aunque existen muchas más posibilidades que se expondrán en siguientes artículos.

Categories
HTML
  • CSS
  • HTML
  • jQuery
  • PHP
  • Sublime Text 2
    • Archivo

    • ► 2013 (1)
      • ► Junio (1)
        • • Parsear un XML mediante AJAX y jQuery
    • ► 2012 (5)
      • ► Octubre (3)
        • • Ahorra código utilizando snippets
        • • Atajos de teclado para Sublime Text 2
        • • El uso de las media queries
      • ► Septiembre (2)
        • • Almacenamiento con HTML5, Web Storage
        • • Efectos 3D para tus sliders
    Powered by mod LCA
    • @Twitter

    • Para la reflexión

      La mejor razón para crear una empresa es para tener un impacto: crear un producto o servicio que haga del mundo un lugar mejor.

      - Guy Kawasaki -

    Created by luiszuno.com
    Adaptación a Joomla ByteLovers

    • Facebook
    • twitter
    • linkedin
    • Google plus