setitem - localstorage var javascript

¿Cómo trabajar alrededor de IE11 localStorage eventos disparando dos veces o nada en iframes?

Question

Supongo que es un error, pero no he podido encontrar ninguna discusión sobre esto.

Se sabe que IE10 (contra especificaciones) disparará eventos de almacenamiento a nivel local (es decir, dentro del mismo contexto de ejecución global desde el que se desencadenó el evento), pero IE11 parece alejarse aún más de la especificación ( http://www.w3.org/TR/webstorage/ ) cuando se trata de iframes del mismo dominio:

• si el iframe está incrustado en la página que activó el evento de almacenamiento, el evento activará TWICE dentro de ese iframe.
• si el iframe está incrustado en una página que es diferente de la que desencadenó el evento de almacenamiento, el evento no se disparará en absoluto dentro de ese iframe.
• si el evento se desencadena desde un iframe , disparará DOS VECES localmente y DOS VECES en cualquier otro iframe incrustado en la misma página, pero no en absoluto en iframes de otras páginas.

Puede probar esto abriendo el siguiente enlace en dos pestañas separadas: http://hansifer.com/main.html

¿Alguien tiene alguna idea sobre esta extravagancia?

Última versión probada: IE v11.0.9600.16476 (actualización del 2016-08-13: aparentemente es la "Versión de actualización" que es relevante, no la "Versión" como se informa en el cuadro de diálogo Acerca de IE)

Enlace al informe de errores: https://connect.microsoft.com/IE/feedback/details/811546/ie11-localstorage-events-fire-twice-or-not-at-all-in-iframes

ACTUALIZACIÓN 2015-10-26

Me di cuenta de que esto parece estar solucionado en v11.0.9600.18059, aunque no puedo decir cuándo se eliminó la solución, ya que no parece referenciarse en ninguna KB reciente.

Desafortunadamente, los eventos IE11 localStorage todavía son aberrantes de otras maneras (aunque estos son resúmenes separados del problema expuesto en esta publicación):

• IE plantea eventos localStorage en el contexto de la ventana desde el cual se llamó al localStorage establecido o eliminado que desencadenó el evento. Los eventos localStorage solo se deben generar en contextos de ventana extranjeros del mismo origen. (actualización: trabajando en EdgeHTML 13.10586)

• IE utiliza cadenas vacías en lugar de null para e.oldValue/e.newValue cuando se agregan / eliminan elementos de almacenamiento. (actualización: sigue siendo un problema en EdgeHTML 13.10586)

• IE llama al manejador de eventos localStorage no deterministicamente ANTES o DESPUÉS de que el ajuste / eliminación tenga efecto en lugar de DESPUÉS consistentemente.

ACTUALIZACIÓN 2015-12-24

Parece que este error se transfirió a Edge (probado EdgeHTML 13.10586)

ACTUALIZACIÓN 2016-02-02

Welp, no importa. Este error se observa una vez más en IE v11.63.10586.0 (actualización del 2016-08-13: aparentemente es la "Versión de actualización" que es relevante, no la "Versión" como se informa en el cuadro de diálogo Acerca de IE)

ACTUALIZACIÓN 2016-08-13

Esto ahora parece estar arreglado en IE (Actualización de la Versión 11.0.34), aunque los eventos de almacenamiento aún se disparan en la ventana de origen, en contra de las especificaciones (un problema conocido de larga data como se menciona anteriormente).

Encontré esta KB que se incluyó en la actualización de seguridad de IE del 14 de junio de 2016 , aunque de acuerdo con su descripción, solo aborda el segundo punto anterior.

En cuanto a Edge (probado EdgeHTML 14.14393), parece que este problema ya está solucionado, pero hay un problema nuevo: los eventos de almacenamiento no se activan en los marcos de origen idéntico de la misma página.

Lo reporté por separado a MS here .

Answer 1

Pude window.parent el problema utilizando window.parent para registrar el evento en el iframe de esta manera:

Página Iframe

var win = window.parent || window.opener || window;
win.addEventListener(''storage'', handleLocalStorageEvent, false);

function handleLocalStorageEvent(e) {
    console.log(''IFRAME local storage event'', e);

    var sdf = document.getElementById(''sdf'');
    sdf.innerHTML = sdf.innerHTML + ''Storage Event => ('' + e.newValue + '')<br>'';
}

Descargo de responsabilidad: Tenga en cuenta que esta solución está destinada a arreglar (solucionar) el problema IE11. De ninguna manera, se pretende o sugiere que esto se aplique a todos los navegadores.

Answer 2

Si alguna vez desea evitar que un evento se llame varias veces, independientemente de la causa de la invocación, utilice un indicador para bloquear eventos posteriores. Hay varias estrategias:

.1. estrangulamiento basado en el tiempo supongamos que tiene una función "func" y desea que se la llame solo una vez dentro de 200 ms:

function func(){
  if (document.func_lock) return;
  document.func_lock=true; // block future calls
  setTimeout(function(){document.func_lock=null;},300);
}

Cuando se disparan múltiples eventos al mismo tiempo, puede esperar que todos lleguen dentro de la ventana de 300 ms. El código anterior se puede simplificar aprovechando el identificador del temporizador:

function func(){
  if (document.func_lock) return;
  document.func_lock=setTimeout(function(){return;},300);
}

Cuando el temporizador expira, el bloqueo se elimina automáticamente.

.2. Eliminar la bandera mediante el uso de una devolución de llamada. El proceso es trivial, así que no publicaré código de muestra aquí.

En términos de ubicación del marcador, puede usar cualquier objeto DOM exclusivo. Como no conozco el contexto de su solicitud, solo usaré "documento" aquí. También puede usar las claves de hash que son particulares de su aplicación, dado que ya está tratando con el almacenamiento local. El concepto es el mismo.