Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

HTML 5: Diferencias y ejemplos entre Local Storage y Session Storage
Actualizado el 18 Mayo, 2016 y leído 3,153 veces
Calificación: 10.00 / 10

HTML 5: Diferencias y ejemplos entre Local Storage y Session Storage

Anexsoft

Cookies

Por defecto cada petición realizada usando el protocolo HTTP es stateless (sin estado), es decir que no persiste la información. Para dar solución a este inconveniente, claro hablando desde el lado del cliente se suelen usar las cookies pero hoy en día con los nuevos navegadores y la aportación de HMTL 5 se esta dejando a un lado este concepto y estamos migrando a Local Storage y Session Storage. Usar cookies tiene una gran ventaja, que podemos almacenar información que sea accesible desde el servidor tambien, al crear una de estas la información viajará en cada petición que hagamos al servidor. Pero hay muchos casos y con la demanda de javascript hoy en día, muchas veces solo queremos persistir la información en el lado del cliente. y es lo que vamos a tratar en esta oportunidad.

Ventajas

  • Podemos acceder a la información de la cookie desde el servidor

Desventajas

  • Limitados a 4 KB
  • Existe la posibilidad que nuestra web no funcione correctamente porque depende mucho de las cookies y esto se puede inhabilitar facilmente.
  • Aumenta el peso de la petición actual. Si bien son 4 KB a eso lo multiplicamos por un millon de visitas (serían como 4 millones de carga adicional para nuestro servidor).

 

Local Storage y Session Storage

Son la nueva caracteristica que soporta los navegadores actuales gracias a HTML 5 para guardar información en el lado del cliente. Esta información la guardamos al igual que un comportamiento de un diccionario, es decir Key y Value. Todo lo guardado resulta ser una cadena. A diferencia de las cookie esta información es solo persistida en el lado del cliente y jamás es enviada en cada petición que realice nuestra aplicación.

La diferencia entre Local Storage y Session Storage es que la primera no tiene fecha de expiración y la segunda solo será válida para la ventana actual en la que estamos navegando y solo son accesibles para el dominio actual. Ambas pueden ser eliminadas si se limpia la información guardada en el navegador.

Implementación de Local Storage

// Set
localStorage.setItem('algo', 'Guarde algo');

// Get
console.log(localStorage['algo']);

// Delete
localStorage.removeItem('algo');

Implementación de Session Storage

// Set
sessionStorage.setItem('algo', 'Guarde algo');


// Get
console.log(sessionStorage['algo']);

// Delete
sessionStorage.removeItem('algo');

Ambas tienen la misma forma de lectura y escritura para la información a persistir como si se tratará de un caso de polimorfismo, a lo mejor lo es, sería cosa de investigar más a fondo.

 

Persistiendo un objeto en el Local Storage

Bien he creado un objeto experimental para trabajar con Json y Local Storage así que deberías estar en la capacidad de poder mejorarlo o corregir cualquier inconveniente presentado.

$myLocalStorage = (function(){
    var name = null;
    return {
        set: function(k, value){
            localStorage.setItem(k, JSON.stringify(value));
        },
        get: function(k){
            var data = localStorage[k];
            
            if(data === undefined) throw 'Key no inicializada';
            
            return JSON.parse(data);
        },
        remove: function(k){
            localStorage.removeItem(k);
        }
    };
})();

Su implementación es la siguiente:

// Set
$myLocalStorage.set('algo', {
    id: 1,
    nombre: 'Eduardo'
});

// Get
console.log(
    $myLocalStorage.get('algo')
)

// Object {id: 1, nombre: "Eduardo"}

De esta manera podemos trabajar con objetos dentro del Local Storage.

¡Adquiera ya!

  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.