La propriété localStorage de l’objet Window est comparable à sessionStorage (la même politique de même origine est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. 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 pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée 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 contourner ce problème en insérant l’un des deux codes suivants 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 est une imitation exacte de 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 est limitée par la capacité 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 une clé n’est pas sécurisée avec ce code. Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet localStorage.
Note : En remplaçant "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" par "; path=/" (et en changeant le nom de l’objet), cela deviendra un polyfill pour sessionStorage plutôt que pour localStorage. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de sessionStorage restreint les valeurs stockées au contexte de navigation actuel uniquement.

Voici une autre imitation, moins exacte, de l’objet localStorage. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer < 8 (testé et vérifié même avec Internet Explorer 6). Ce code 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 les 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 possible 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 remplaçant 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 pour sessionStorage plutôt que pour localStorage. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres 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 de navigation actuel uniquement.

Compatibilité et relation avec globalStorage

localStorage est équivalent à globalStorage[location.hostname], à la différence qu’il est rattaché à une origine HTML5, et que localStorage est une instance de Storage, contrairement à globalStorage[location.hostname] qui est une instance de StorageObsolete (qui est abordé ci-dessous). 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 globalStorage. localStorage est une interface standard alors que globalStorage n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.

Veuillez noter que définir une propriété sur globalStorage[location.hostname] n’entraîne pas sa définition sur localStorage, et qu’étendre Storage.prototype n’affecte pas les objets globalStorage ; pour faire ainsi, c’est StorageObsolete.prototype qu’il faut étendre.

Format de stockage

Les clés et les valeurs de Storage sont stockées au format DOMString UTF-16, qui utilise 2 octets par caractère.

Étiquettes et contributeurs liés au document

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