Ir al contenido principal

Sessionstorage y LocalStorage Parte 1 : HTML5 Javascript


SessionStorage


Si hay algo que siempre se extraño de HTML es en alguna forma de almacenar datos, que ayude al usuario a una mejor movilidad mientras navega nuestras páginas. Esto se puede lograr mediante el uso de las llamadas cookies , el problema es que tiene ciertas restricciones. Ya con HTML5 y Javascript esto se puede lograr mediante un atributo del DOM llamado sessionStorage que se utiliza como objeto global de Javascript, el cual dispone de métodos que nos ayudan a manipular los datos que queramos utilizar.

SessionStorage vs Cookies

Otra opción a las cookies sería el objeto SessionStorage, con el cual podríamos tener disponible los datos almacenados por todas las paginas web del mismo sitio, con el cual hacer algo parecido a las Sessiones de PHP.
En Internet Explorer 8, el espacio disponible de almacenamiento de SessionStorage es de 8MB a comparación de los 4KB de las cookies.

¿SessionStorage? ¿Pero como es esto?

Cuando abrimos una página web con el navegador pedimos información al servidor y en ese momento se inicia una sesión, con el cual podemos guardar datos que estará sólo accesible para el navegador con el cual estamos conectados. Ahora, si con el navegador no realizamos ninguna actividad con el servidor durante al menos 15 minutos ,entonces el servidor borrará esos datos de la sesión.

Ejemplo : Una forma de guardar datos con javascript.
//guardando una cadena
sessionStorage.miNombre = 'Franz Wilder';
 //otra forma de guardar
sessionStorage['valor'] = 'Franz';
 // devuelve 'Franz Wilder'
console.log( sessionStorage.miNombre );

- setItem

Este método se utiliza para almacenar datos en una clave especificada. Si el dato se guarda en una clave ya existente , entonces se sobreescribe el dato guardado.

//guardando datos
sessionStorage.setItem('miClave','Franz');
sessionStorage.setItem('miLLave','Escorpio');

- getItem

Este método devuelve el valor del dato guardado en una clave dada, pero devuelve null si la clave no existe.

//guardando datos
sessionStorage.miClave = 'Franz';
//otra manera de guardar datos
sessionStorage.setItem('miLLave','Renzo');
 
// recuperando los datos
var dato1 = sessionStorage.getItem('miClave'); // dato1 = 'Franz'
var dato2 = sessionStorage.getItem('miLLave'); // dato2 = 'Renzo'

//el valor de variable es NULL porque 'miKey' no es una clave existente
var variable = sessionStorage.getItem('miKey');

- length

Devuelve la cantidad de datos guardados.
//guardando datos
sessionStorage.setItem('miLlave','Franz');
sessionStorage.setItem('miClave','Renzo');
sessionStorage.setItem('miKey','Paul');

var total = sessionStorage.length; //total = 3

- removeItem

Este método elimina el dato de una clave específica.

sessionStorage.setItem('miClave','Franz');
sessionStorage.getItem('miClave');   // devuelve 'Franz'
 
sessionStorage.removeItem('miClave');
sessionStorage.getItem('miClave');   // devuelve NULL

- clear

Este método elimina todo el espacio de almacenamiento. Todas las claves se eliminan.

sessionStorage.setItem('miClave','Franz');
sessionStorage.setItem('miLLave','Renzo');
sessionStorage.length;   // devuelve 2
 
//borrando
sessionStorage.clear();
sessionStorage.length;   // devuelve 0

¿y LocalStorage?

Es igual al objeto sessionStorage incluso con los mismos métodos, con la diferencia en que los datos se mantienen así hayamos cerrado la pestaña o el navegador.

¿Mi navegador es compatible?

Aunque parezca mentira sessionStorage funciona en todos los navegadores incluso en Internet Explorer !
IEFIREFOXSAFARICHROMEOPERAIPHONEANDROID
8.0+3.5+4.0+4.0+10.5+2.0+2.0+

Si quieres comprobar la compatibilidad con el navegador puedes usar este código.
if(typeof(Storage)!=="undefined"){
    alert('Funciona');
}
else{
    alert('MOG!  usas IE 6 o 7?');
}


Tus visitantes usan IE6 o 7? entonces estos códigos es la solución.
¿Y que pasa si se supera la capacidad de almacenamiento? .
Para ese caso podemos enfrentar esta situación capturando el error.
try {
    localStorage.setItem('valor', 'Franz');
} 
catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Ha excedido el almacenamiento!');
    }
}


¿Que almacena estos objetos globales?

Lamentable los datos almacenados son guardados como cadenas y al recuperarlo con el método getItem( ) se obtienen cadenas.
localStorage.setItem('franz1',[2,3,6]);
localStorage.setItem('franz2',2);
localStorage.setItem('franz3','cadena');
localStorage.setItem('franz4',{nombre:'franz'});
 
console.log(localStorage.getItem('franz1'));  //  "2,3,6"
console.log(typeof(localStorage.getItem('franz1'))); //  string
 
console.log(localStorage.getItem('franz2'));  //  "2"
console.log(typeof(localStorage.getItem('franz2'))); //  string
 
console.log(localStorage.getItem('franz3'));  //  "cadena"
console.log(typeof(localStorage.getItem('franz3'))); //  string
 
console.log(localStorage.getItem('franz4'));   //"[object Object]"
console.log(typeof(localStorage.getItem('franz4'))); //  string

Como se puede ver en el ejemplo, todos los datos guardados se convierten en cadena, incluso los objetos se guardan como en forma de cadena "[object Object]". Para solucionar esto hacemos uso de los métodos JSON.stringify (convierte el valor a puro texto) y JSON.parse (analiza la cadena y devuelve el valor analizado ).
//creando el objeto
var objeto = {nombre:'Franz', color:'Azul'};
//JSON.stringify(objeto) => "{nombre:'Franz', color:'Azul'}"
objeto = JSON.stringify(objeto);
//guardando como string 
localStorage.setItem('miObjeto',objeto);
//recuperando como string 
var resultado = localStorage.getItem('miObjeto'); 
//JSON.parse convierte a objeto
objeto = JSON.parse(resultado); 
//devuelve "object" 
console.log(typeof objeto);


Ejemplo: guarda y recupera datos, aún así se cierre la página.
<script>
    function guardar(){
        var miDato = document.getElementById('miInput').value;
        localStorage.setItem('miDato',miDato);
    }
    function recuperar(){
        var miDato = localStorage.getItem('miDato');
        document.getElementById('miInput').value=miDato; 
    }
</script>

<input type="text" id="miInput">

<input type="button" onclick="guardar()" value="guardar">
<input type="button" onclick="recuperar()" value="recuperar">

Demostración

Comentarios

  1. Si creo una aplicación HTML 5, y pongo el local storage, con otra aplicación puedo rescatarla ?

    aplicación A
    localStorage.setItem('Dato');

    aplicación B
    localStorage.getItem('Dato');


    Saludos.

    ResponderEliminar
    Respuestas
    1. los datos estan disponibles mientras el usuario no cierre la ventana y esten asociados a un dominio.

      Eliminar

Publicar un comentario

Entradas populares de este blog

Validar campo de texto sólo letras, números con javascript

En algunos casos necesitaremos que el usuario ingrese solamente letras en un campo de texto, impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript y HTML esto puede ser posible.   Método 1:  Podemos utilizar el atributo onkeypress devolviendo el valor de false, si es que se escribe un caracter distinto a la cadena que hemos definido (para el ejemplo es " áéíóúabcdefghijklmnñopqrstuvwxyz").   Método 2: Pasos a seguir: Crear una lista con todas las letras permitidas (a,b,c ... etc). Crear una lista de teclas especiales tales como (BackSpace , flecha izquierda, flecha derecha, Supr) estas son teclas permitidas aparte de las teclas permitidas en el primer paso.     Entendiendo el código En la línea 4 la sentencia String.fromCharCode(key) obteniene el caracter presionado por el usuario que añadiendo la sentencia toLowerCase() convertiríamos la letra a minúscula. Con esto guardamos la letra presionada por el usuario en la variabl

La propiedad Disabled en Javascript

Como atributo de un elemento HTML Ejemplo: "Solo añadiendo el atributo disabled". < input type = "button" value = "Desactivado" disabled /> < input type = "text" disabled /> < input type = "button" value = "Boton normal" /> Demostración: El botón y el campo de texto están desactivados Manipulando Disabled usando Javascript Ejemplo 1: Utilizando el "id" del campo de texto en este caso "miText". < script type = "text/javascript" > function Desactivar () { document . getElementById ( 'miText' ) . disabled = true ; } < /script > < input type = "button" value = "Desactivar" onclick = "Desactivar()" / > < input type = "text" id = "miText" / > Demostración: Dándole clic al botón se desactiva el campo de texto. Ejemplo 2:Utilizando el event

Validar campo de texto con javascript

Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript. Código < script type = "text/javascript" > function validar () { //obteniendo el valor que se puso en campo text del formulario miCampoTexto = document . getElementById ( "miCampo" ) . value ; //la condición if ( miCampoTexto . length == 0 ) { return false ; } return true ; } </ script > < form action = "mipagina.php" onsubmit = "return validar()" > < input type = "text" id = " miCampo " name = "miCampo" > < br > < input type = "submit" value = "Enviar" > </ form > miCampoTexto.length -> indica el número de caracteres del texto introducido En esta validación los usuarios deben llenar los campos