localStorage est identique à  sessionStorage et répond aux mêmes règles de domaine mais les données enregistrées sont persistantes. localStorage a été introduit dans Firefox 3.5.

Note: Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée et stockée dans l'espace de stockage local; Cette base de données est vidée et détruite quand le mode de navigation privé est arrêté.
// Sauvegarder les informations dans l'espace local courant
localStorage.setItem("username", "John");

// Accéder à des données enregistrées
alert( "username = " + localStorage.getItem("username"));

La persistence de localStorage le rend utile pour une varitété d'usages, comprenant des compteurs de vues de page comme démontré dans ce tutoriel sur Codepen.

Compatibilité

Les objets  Storage sont un ajout récent au standard. Ainsi ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de l'utiliser en insérant l'un de ces deux codes au début de vos scripts. Cela vous permettra d'utiliser l'objet localStorage dans les navigateurs qui ne le supportent pas nativement.

Cet algorithme imite l'objet localStorage, mais utilise les 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;
  })());
}
Note: La taille maximale des données qui peuvent être enregistrées est très limitée par l'utilisation des cookies. Avec cet algorithme, utilisez les fonctions localStorage.setItem() et localStorage.removeItem() pour ajouter, changer, ou supprimer une clé. L'utilisation des méthodes localStorage.yourKey = yourValue; et delete localStorage.yourKey; pour définir ou supprimer n'est pas une manière de coder sécurisée. Vous pouvez également changer le nom et l'utiliser pour gérer uniquement les cookies indépendamment de l'objet.
Note: By changing the string "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" to: "; path=/" (and changing the object's name), this will become a sessionStorage polyfill rather than a localStorage polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant sessionStorage implementation restricts stored values to the current browsing context only.

Voici une autre imitation, moins exacte, de l'objet  localStorage. C'est plus simple que la version précédente, mais c'est compatible avec les navigateur plus anciens comme Internet Explorer < 8 (testé et fonctionnant même avec in Internet Explorer 6). Ce script utilise également les 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;
}
Note: La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez des fonctions localStorage.getItem()localStorage.setItem(), et localStorage.removeItem() pour récupérer, ajouter, modifier, ou supprimer une clé. L'utilsation de la méthode localStorage.yourKey pour récupérer, définir, ou supprimer une clé n'est pas authorisée avec ce code.  Vous pouvez également changer son nom et l'utiliser pour gérer les cookies indépendamment de l'objet localStorage.
Note: En changeant la chaîne "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" par : "; path=/" (et en changeant le nom de l'objet), cela deviendra un polyfill sessionStorage plutôt qu'un polyfill localStorage. Quoi qu'il en soit, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtre du navigateur( et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu'une implémentation pleinement compatible avec sessionStorage restreint les valeurs sauvegardées au contexte actuel (un onglet ou une fenêtre).

Compatibility and relation with globalStorage

localStorage est équivalent à  globalStorage[location.hostname], à la différence près que cela n'est situé qu'à l'intérieur d'un domaine HTML5 (scheme + hostname + non-standard port) et localStorage est une instance Storage contrairement à  globalStorage[location.hostname] qui est une instance de StorageObsolete qui est abordé ensuite. Par exemple, http://example.com ne sera pas capable d'accéder au même objet localStorage que https://example.com mais il pourront accéder au même élément  globalStoragelocalStorage est une interface standard alors que  globalStorage n'est pas standard. Ainsi, vous ne devriez pas vous y fier.

Veuillez noter que définir une propriété à  globalStorage[location.hostname] ne permet pas de la définir pour localStorage et étendre Storage.prototype n'affecte pas les objets globalStorage; Seulement l'extension de StorageObsolete.prototype le fait.

Format de stockage

 Les clés et les valeurs Storage sont toutes les deux stockées au format UTF-16 DOMString, qui utilise 2 bytes par charactère.

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : cedeber, lulu5239, Fredloub, CoolSnow04
Dernière mise à jour par : cedeber,