{{APIRef()}}
La propriété localStorage de l’objet Window est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "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.
// 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.
Les objets {{ DOMxRef("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;
})());
}
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."; 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 {{ Glossary("Browsing_context", "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;
}
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."; 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 {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.localStorage est équivalent à globalStorage[location.hostname], à la différence qu’il est rattaché à une {{ Glossary("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.
Les clés et les valeurs de Storage sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.