Traducción en curso

localStorage (almacenamiento local) es lo mismo que sessionStorage (almacenamiento de sesión) con las mismas reglas de mismo-origen aplicadas pero persistentes a través de sesiones. localStorage fue introducido en la version Firefox 3.5.

Nota: Cuando el navegador está en modo de navegación privado, una base de datos nueva temporal se crea para guardar data de almacenamiento local; esta base de datos es vaciada y descartada cuando el modo de navegación privado es apagado.
// Guardar data al almacenamiento local actual
localStorage.setItem("nombredeusuario", "John");

// Accesar data almacenada
alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));

La persistencia de localStorage lo hace útil para una variedad de cosas, incluyendo contadores de páginas como se demuestra en este tutorial en Codepen.

Compatibilidad

Los objetos de Storage (almacenamiento) son una adición reciente al estándar. Por lo cuál pueden no estár presentes en todos los navegadores. Se puede trabajar alrededor de este percance si se introduce uno de los dos códigos al principio de tus scripts, permitiendo el uso de el objeto localStorage en implementaciones que no lo soportan de forma nativa.

Este algoritmo es una imitación exacta de el objeto localStorage, pero hace uso de cookies.

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;
  })());
}
Nota: El tamaño de data máximo que puede ser guardado es severamente restringido por el uso de cookies. Con este algoritmo, utilice las funciones localStorage.setItem() y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso de métodos localStorage.suClave = suValor; y delete localStorage.suClave; ,para asignar o eliminar una llave, no son una forma segura de hacerlo con este código. También puedes cambiarle el nombre y usarlo sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y cambiando también el nombre del objeto), esto se volvera un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo será borrado hasta que todas las ventanas del navegador hayan sido cerradas), mientras que una implementacion  sessionStorage totalmente-complaciente restringe los valores guardados solamente al contexto actual del navegador.

Aquí está otra, imitación menos exacta de el objeto localStorage. Esta es más sencilla que la anterior, pero compatible con navegadores viejos, como Internet Explorer < 8 (probado y funcional incluso en Internet Explorer 6). También hace uso de cookies.

if (!window.localStorage) {
  window.localStorage = {
    getItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
    },
    key: function (nKeyId) {
      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
    },
    setItem: function (sKey, sValue) {
      if(!sKey) { return; }
      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
      this.length = document.cookie.match(/\=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      this.length--;
    },
    hasOwnProperty: function (sKey) {
      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
    }
  };
  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}
Nota: El tamaño de data máximo que puede ser guardado es severamente restringido por el uso de cookies. Con este algoritmo, utilize las funciones localStorage.getItem()localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y cambiando el nombre del objeto), esto se volverá un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo será borrado hasta que todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  sessionStorage totalmente-complaciente restringirá los valores guardados solamente al contexto actual del navegador.

Compatibilidad y relación a globalStorage

localStorage es lo mismo que globalStorage[location.hostname], con la excepción de tener un ámbito de origen HTML5 (scheme + hostname + non-standard port (puerto no estandar) y localStorage siendo una instancia de Storage al contrario que globalStorage[location.hostname] siendo una instancia de StorageObsolete que se explica más adelante. Por ejemplo, http://ejemplo.com no puede accesar el mismo objeto localStorage que https://ejemplo.com pero los dos pueden accesar el mismo artículo de globalStorage. --localStorage es una interfaz estándar mientras que globalStorage no lo es, así que no se debe depender de ella.

Nótese que estableciendo una propiedad en globalStorage[location.hostname] no la establece en localStorage y extendiendo Storage.prototype no afecta artículos de globalStorage; sólo extendiendo StorageObsolete.prototype lo hace.

Formato Storage

Las claves y valores en Storage son guardadas en el formato UTF-16 DOMString, el cuál usa 2 bytes por letra.

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: Andresrodart, lsphantom
Última actualización por: Andresrodart,