Recherche…


Syntaxe

  • localStorage.setItem (nom, valeur);

  • localStorage.getItem (name);

  • localStorage.name = valeur;

  • localStorage.name;

  • localStorage.clear ()

  • localStorage.removeItem (nom);

Paramètres

Paramètre La description
prénom La clé / le nom de l'article
valeur La valeur de l'article

Remarques

L'API de stockage Web est spécifiée dans le standard de vie HTML WHATWG .

Utiliser localStorage

L'objet localStorage fournit un stockage de clé-valeur persistant (mais pas permanent - voir les limites ci-dessous) des chaînes. Toute modification est immédiatement visible dans toutes les autres fenêtres / cadres de la même origine. Les valeurs stockées sont persistantes indéfiniment, à moins que l'utilisateur n'efface les données enregistrées ou configure une limite d'expiration. localStorage utilise une interface de type carte pour obtenir et définir des valeurs.

localStorage.setItem('name', "John Smith");
console.log(localStorage.getItem('name')); // "John Smith"

localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // null

Si vous souhaitez stocker des données structurées simples, vous pouvez utiliser JSON pour les sérialiser vers et depuis des chaînes de stockage.

var players = [{name: "Tyler", score: 22}, {name: "Ryan", score: 41}];
localStorage.setItem('players', JSON.stringify(players));

console.log(JSON.parse(localStorage.getItem('players')));
// [ Object { name: "Tyler", score: 22 }, Object { name: "Ryan", score: 41 } ]

limites de localStorage dans les navigateurs

Navigateurs mobiles:

Navigateur Google Chrome Navigateur Android Firefox iOS Safari
Version 40 4.3 34 6-8
Espace disponible 10Mo 2 Mo 10Mo 5MB

Navigateurs de bureau:

Navigateur Google Chrome Opéra Firefox Safari Internet Explorer
Version 40 27 34 6-8 9-11
Espace disponible 10Mo 10Mo 10Mo 5MB 10Mo

Événements de stockage

Chaque fois qu'une valeur est définie dans localStorage, un événement de storage est distribué sur toutes les autres windows de la même origine. Cela peut être utilisé pour synchroniser l'état entre différentes pages sans recharger ou communiquer avec un serveur. Par exemple, nous pouvons refléter la valeur d'un élément d'entrée en tant que texte de paragraphe dans une autre fenêtre:

Première fenêtre
var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};
Seconde fenêtre
var output = document.createElement('p');
document.body.appendChild(output);

output.textContent = localStorage.getItem('user-value');

window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

Remarques

L'événement n'est pas déclenché ou capturable sous Chrome, Edge et Safari si le domaine a été modifié via un script.

Première fenêtre
// page url: http://sub.a.com/1.html
document.domain = 'a.com';

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};
Deuxième fenêtre
// page url: http://sub.a.com/2.html
document.domain = 'a.com';

var output = document.createElement('p');
document.body.appendChild(output);

// Listener will never called under Chrome(53), Edge and Safari(10.0).
window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

sessionStorage

L'objet sessionStorage implémente la même interface de stockage que localStorage. Cependant, au lieu d'être partagées avec toutes les pages d'origine, les données sessionStorage sont stockées séparément pour chaque fenêtre / onglet. Les données stockées persistent entre les pages de cette fenêtre / de cet onglet tant qu'elles sont ouvertes, mais ne sont visibles nulle part ailleurs.

var audio = document.querySelector('audio');

// Maintain the volume if the user clicks a link then navigates back here.
audio.volume = Number(sessionStorage.getItem('volume') || 1.0);
audio.onvolumechange = function(event) {
  sessionStorage.setItem('volume', audio.volume);
};

Enregistrer les données dans la sessionStorage

sessionStorage.setItem('key', 'value');

Récupère les données de sessionStorage

var data = sessionStorage.getItem('key');

Supprimer les données enregistrées de sessionStorage

sessionStorage.removeItem('key')

Effacer le stockage

Pour effacer le stockage, exécutez simplement

localStorage.clear();

Conditions d'erreur

La plupart des navigateurs, configurés pour bloquer les cookies, bloquent également localStorage . Les tentatives d'utilisation entraîneront une exception. N'oubliez pas de gérer ces cas .

var video = document.querySelector('video')
try {
    video.volume = localStorage.getItem('volume')
} catch (error) {
    alert('If you\'d like your volume saved, turn on cookies')
}
video.play()

Si l'erreur n'était pas traitée, le programme cesserait de fonctionner correctement.

Supprimer un élément de stockage

Pour supprimer un élément spécifique du navigateur Stockage (à l'opposé de setItem ), utilisez removeItem

localStorage.removeItem("greet");

Exemple:

localStorage.setItem("greet", "hi");
localStorage.removeItem("greet");

console.log( localStorage.getItem("greet") ); // null

(Même chose pour sessionStorage )

Manière plus simple de manipuler le stockage

localStorage , sessionStorage sont des objets JavaScript et vous pouvez les traiter comme tels.
Au lieu d'utiliser des méthodes de stockage telles que .getItem() , .setItem() , etc., voici une alternative plus simple:

// Set
localStorage.greet = "Hi!"; // Same as: window.localStorage.setItem("greet", "Hi!");

// Get
localStorage.greet;         // Same as: window.localStorage.getItem("greet");

// Remove item
delete localStorage.greet;  // Same as: window.localStorage.removeItem("greet");

// Clear storage
localStorage.clear();

Exemple:

// Store values (Strings, Numbers)
localStorage.hello = "Hello";
localStorage.year  = 2017;    

// Store complex data (Objects, Arrays)
var user = {name:"John", surname:"Doe", books:["A","B"]};
localStorage.user = JSON.stringify( user );

// Important: Numbers are stored as String
console.log( typeof localStorage.year ); // String

// Retrieve values
var someYear = localStorage.year; // "2017"

// Retrieve complex data
var userData = JSON.parse( localStorage.user );
var userName = userData.name; // "John"

// Remove specific data
delete localStorage.year; 

// Clear (delete) all stored data
localStorage.clear();

Longueur du stock local

localStorage.length propriété localStorage.length renvoie un nombre entier indiquant le nombre d'éléments dans le localStorage

Exemple:

Set Items

localStorage.setItem('StackOverflow', 'Documentation');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'sprite.svg');

Obtenir la longueur

localStorage.length; // 3


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow