MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

LocalStorage

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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

Nota: Cuando el navegador está en modo de navegación privado, una nueva, base de datos 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 su código, permitiendo el uso de el objeto localStorage en implementaciones que no lo soportan en uso nativo.

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, utilize 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; no son la manera segura con este codigo para establecer o borrar una clave. También se puede cambiar el nombre y usar 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 volvera un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartira valores almacenados atraves de pestañas y ventanas del navegador (y solo será borrado hasta que todas las ventanas del navegador hayan sido cerradas), mientras que una implementacion  sessionStorage totalmente-complaciente restringirá 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, pero compatible con navegadores más viejos, como Internet Explorer < 8 (probado y funcional incluso en Internet Explorer 6). También hace el 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 de el método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este codigo. También se puede cambiar el nombre y usar 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 volvera un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartira valores almacenados atraves de pestañas y ventanas del navegador (y solo será borrado hasta que todas las ventanas del navegador hayan sido cerradas), mientras que una implementacion  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) 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 globalStoragelocalStorage es una interfaz estándar mientras que globalStorage no lo es, así que no se debe depender de estas.

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; solo 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: lsphantom
 Última actualización por: lsphantom,