localStorage.getItem은 IE 9에서 이전 데이터를 반환합니다.

Question

다음 예제는 IE 9와 적어도 두 개의 다른 탭에서 실행되어야합니다.

<input type="text" name="data" value="" placeholder="change me" id="data" /> 
<p id="fromEvent">Waiting for data via <code>storage</code> event...</p> 

<script type="text/javascript"> 
window.addEventListener("storage", function (e) { 
    if (e.key == 'storage-event-test') { 
     var newValue = localStorage.getItem('storage-event-test'); // returns old value 
    // var newValue = e.newValue; // returns new value 
     $('#fromEvent').html(newValue); 
    } 
    }, false); 

    $('#data').live('keyup', function() { 
    var changedValue = this.value; 
     $('#fromEvent').html(changedValue); 
     localStorage.setItem('storage-event-test', changedValue); 
    }); 
</script> 

이 var newValue = localstorage.getItem('storage-event-test');와 탭에서 데이터를 얻을하려고하면

1는 test 다음 내 <p id="fromEvent">에서 제대로 test 보여줍니다하지만 내 탭 2 단지 tes

이제 경우 기록 입력 코드를 변경하려면 var newValue = e.newValue; Tab 1 & Tab 2는 <p id="fromEvent">

에 넣습니다.

다른 사람이 왜 다른 결과를 반환하는지 설명 할 수 있습니까? Google 크롬 및 Firefox에서이 코드를 테스트 해 본 결과이 문제가 발생하지 않았습니다.

단지 기록을 위해, 이것은 IIS Express를 사용하고 jquery-1.5.1을 사용하여 7 Ultimate 64 SP1에서 우승했습니다. 와 버그 정상 IIS 7.5 동일한 결과를 테스트 IE9의 32 비트 및 64 비트 버전

편집 모두에

편집 2 사람이 무슨 일이 일어나고 있는지 확인 수 있다면 좋겠지 그들에게?

Answer 1

왜 다른 결과를 반환하는지에 대한 대답은 꽤 분명합니다. IE에서 storage 이벤트가 보다 먼저 실행되고 값이 변경되고 다른 브라우저에서 이후에 이 발생합니다. 그것은하지만이 방법을 구현하는 이유를 모르겠어요

if (e.key == 'storage-event-test') { 
    // e.newValue -> new value 
    // localStorage.getItem('storage-event-test') -> old value in IE 
    setTimeout(function(){ 
     var newValue = localStorage.getItem('storage-event-test'); // new value 
     $('#fromEvent').html(newValue); 
    }, 1); // delay 
} 

,하지만 난 specification이 너무 모호하고 때 말을하지 않습니다 같은데요 : 당신은 당신의 코드에 adding a slight delay하여 확인할 수 있습니다 사건은 해고되어야한다.

저장

이벤트가 시작되면 기억 영역 변경 (로컬 저장을위한 세션 저장 용) 이전 두 섹션에서 설명한다.

이 경우, 상기 사용자 에이전트는 거품이 켜지지 않고 캔슬없는 이름 기억과 이벤트를 발생하기 위해 작업 큐해야하며, 이는 누구 각 창 물체의 StorageEvent 인터페이스를 사용 문서 개체에 영향을받는 저장소 개체가 있습니다.