FERNETJS

fernet + javascript

JavaScript NodeJS Historia FAQ

Almacenando en el cliente: LocalStorage, SessionStorage y

Cookies
2012-12-20 • Pablo Novas

Seguramente ya escuchaste sobre el almacenamiento local de HTML5, la intensión de este post es pegarle un vistazo para que empieces a usarlo.

Primero tenemos que tener en cuenta que LocalStorage es el almacenamiento que no expira, y SessionStorage es el que vive sólo en una sesión.
Ambos tienen los mismos métodos:

getItem ( key )
setItem ( key , value )
removeItem ( key )

Van a ver por ahí un globalStorage: es una implementación de Mozilla previa a HTML5, pero desde la versión de Firefox 13 dejó de soportarse, por lo que olvidate
de que existe ὠ

No hay mucho para explicar sobre los métodos ya que hablan por si solos, veamos un ejemplo:

if (window.localStorage) {
   localStorage.setItem("nombre", "pepe");

  var nombre = localStorage.getItem("nombre");

  localStorage.removeItem("nombre");
}
else {
  throw new Error('Tu Browser no soporta LocalStorage!');
}

También se puede utilizar los Items como propiedades del objeto localStorage ó sessionStorage (pero no está recomendado, así que tomalo como título informativo):

localStorage["nombre"] = "pepe";
var nombre = localStorage.nombre;
delete localStorage["nombre"];

El soporte de navegadores es muy amplio:

Feature Chrome Firefox (Gecko) IE Opera Safari (WebKit)

localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
Pueden ver mas info acá

Y cuánto podemos almacenar?: depende mucho del navegador, pero la cantidad oscila entre 2.5 y 5 Mb (2.5 Mb en la mayoría de los navegadores, lo cual
es bastante ὠ )
Pueden ver la tabla completa y probar cuanto se banca el navegador en el que están en Web Storage Test

Podemos guardar JSON?, Si, pero yo te recomendaria que sea serializado, (en String) y lo que hagas antes de enviarlo.
Por que esto?
 1. Por los “fallbacks/ polyfills”, si queremos agregarle un soporte a cookies por si no tiene disponible el web storage, puede que tengamos problemas si no
estamos manejando strings.
2. Lo serializa de todas formas, pero la diferencia es que no es automático, por lo que podemos tener comportamientos extraños:

localStorage.setItem("locura", true);
  var locura = localStorage.getItem("locura");
  console.log(locura); // true
  console.log(typeof locura); // 'string'

Ahora, con JSON?, supongamos que tenemos:

var persona = {
    nombre: "pepe",
    edad: 20,
    locura: true
};

Guardamos directo el JSON al localStorage:

localStorage.setItem("persona", persona);
var personaGuardada = localStorage.getItem("persona");

console.log(typeof persona); //object
console.log(typeof personaGuardada); //string

console.log(personaGuardada.locura); //undefined!
var personaGuardada = JSON.parse(personaGuardada); //Uncaught SyntaxError

Como habría que hacerlo:

 var personaAGuardar = JSON.stringify(persona);

localStorage.setItem("persona", personaAGuardar);
var personaGuardada = localStorage.getItem("persona");

console.log(typeof persona); //object
console.log(typeof personaGuardada); //string

var personaGuardada = JSON.parse(personaGuardada);
console.log(personaGuardada.locura); //true

Por último te dejo un fallback a Cookies, ya que no siempre tenemos soporte para usarlo, está es una implementacion de Mozilla bastante coqueta (no se si
funciona en IE 7, por ejemplo), la idea es que en nuestra aplicación usamos directamente window.localStorage y siempre va a existir, si el browser no lo
soporta va a ir a cookies automáticamente.
Fuente: MDN – DOM Storage

if (!window.localStorage) {
  Object.defineProperty(window, "localStorage", new (function () {
    var aKeys = [], oStorage = {};
    Object.defineProperty(oStorage, "getItem", {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "key", {
      value: function (nKeyId) { return aKeys[nKeyId]; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "setItem", {
      value: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "length", {
      get: function () { return aKeys.length; },
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "removeItem", {
      value: function (sKey) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    this.get = function () {
      var iThisIndx;
      for (var sKey in oStorage) {
        iThisIndx = aKeys.indexOf(sKey);
        if (iThisIndx === ‐1) { oStorage.setItem(sKey, oStorage[sKey]); }
        else { aKeys.splice(iThisIndx, 1); }
        delete oStorage[sKey];
       }
      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
        aCouple = aCouples[nIdx].split(/\s*=\s*/);
        if (aCouple.length > 1) {
          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
          aKeys.push(iKey);
        }
      }
      return oStorage;
    };
    this.configurable = false;
    this.enumerable = true;
  })());
}

Compartí este post en Twitter o en Facebook. Seguinos en twitter para mantenerte al tanto, o seguí al autor de este artículo. ¿Algún problema? Creá un
issue!.

10 Comentarios fernetjs   Iniciar sesión

  Recomendar ⤤ Compartir Mejores primero

Unite a la discusión...

matiasarriola  Moderador   •  hace 3 años

Muy bueno!

Las contras de usar un polyfill que termina almacenando en cookies me imagino que deben ser las siguientes: 
* Límite de almacenamiento muy limitado ( ~ 4kb )