Perché Internet Explorer attiva l'evento "memoria" della finestra nella finestra che ha archiviato i dati?

Question

Internet Explorer 10 attiva l'evento "memoria" della finestra nella stessa finestra archiviata nella memoria locale.

Sembra che altri browser attivino l'evento solo su tutte le altre finestre, quindi non devo preoccuparmi di una finestra che sta ascoltando eventi di archiviazione che reagiscono alla sua memorizzazione. Perché IE attiva l'evento nella finestra sbagliata e come posso replicare il comportamento standard in IE?

Answer 1

Microsoft sembra essere a conoscenza del problema, ma non sembra che stanno andando a risolvere il problema in tempi brevi: https://connect.microsoft.com/IE/feedback/details/774798/localstorage-event-fired-in-source-window

Una possibilità è che è possibile progettare i vostri ascoltatori e setter in modo che non reagire o archiviare quando ottengono informazioni da un evento di archiviazione che è già coerente con il loro stato. Tuttavia, questo modello di progettazione può essere più difficile che affidarsi all'evento di archiviazione che si attiva solo su altre finestre.

Un'altra opzione è fare in modo che lo storage locale funzioni allo stesso modo in Internet Explorer che funzioni in altri browser. Ho trovato una soluzione sicuramente hacky ma funzionale che ho testato su IE10 e mi aspetto di lavorare su IE8 e IE9. I miei componenti javascript non ascoltano direttamente l'evento "storage" della finestra, ma ascoltano invece un 'event dispatcher' che ho creato. Il dispatcher dell'evento ascolta l'evento "storage" della finestra e attiva un evento backbone A MENO DELL'evento di archiviazione originato in quella finestra. Il mio modo di controllare se questa finestra memorizzato questo valore è quello di utilizzare un metodo personalizzato per chiamare setItem() che crea un ID univoco per il valore e tiene traccia di esso, in questo modo:

eventDispatcher.set = function(key, value) { 
    var storageId = (new Date()).getTime(); 
    eventDispatcher.idList.push(storageId); 
    localStorage.setItem(key, {value: value, id: storageId}); 
} 

E il mio EventDispatcher ascolta eventi di stoccaggio e innesca un evento solo se il suo elenco di ID è creato non contiene ID di questo valore, in questo modo:

$(window).on('storage', dispatchStorageEvent); 
function dispatchStorageEvent(event) { 
    var newValue = JSON.parse(event.originalEvent.newValue); 
    if (eventDispatcher.idList.indexOf(newValue['id']) > -1) { 
    return; 
    } 
    eventDispatcher.trigger("storageEvent:" + event.originalEvent.key, newValue['value']); 
} 

C'è un po 'più di codice è possibile aggiungere a mantenere l'idlist breve e per creare come un array vuoto in primo luogo, ma l'ho lasciato fuori per chiarezza. Creare un eventDispatcher per gestire gli eventi di archiviazione è un po 'sovraccarico, ma può rendere coerente lo sviluppo tra i browser. Una soluzione meno hacky utilizza un meccanismo di blocco e di accodamento corretto, ma può essere molto difficile.