JavaScript Événements de stockage


Exemple

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