JavaScript
Espace archivage sur le Web

Syntaxe

• localStorage.setItem (nom, valeur);

• localStorage.getItem (name);

• localStorage.name = valeur;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (nom);

Paramètres

Remarques

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:

Navigateurs de bureau:

É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:

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);
};

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.

// 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);
};

// 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