JavaScript Eventi di archiviazione


Esempio

Ogni volta che un valore in set in localStorage, un evento di storage verrà inviato su tutte le altre windows dalla stessa origine. Questo può essere usato per sincronizzare lo stato tra pagine diverse senza ricaricare o comunicare con un server. Ad esempio, possiamo riflettere il valore di un elemento di input come testo di paragrafo in un'altra finestra:

Prima finestra
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);
};
Seconda finestra
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;
  }
});

Gli appunti

L'evento non viene attivato o catchable in Chrome, Edge e Safari se il dominio è stato modificato tramite script.

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