localStorage.getItem возвращает старые данные в IE 9 - PullRequest
Новая
       23

localStorage.getItem возвращает старые данные в IE 9

6 голосов
/ 15 февраля 2012

Следующий пример должен быть запущен в 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'); и в Tab 1 вводит test, тогда он показывает правильно test в моем <p id="fromEvent">, но в моей Tab 2 он только пишет tes

Теперь, если я изменю код для использования var newValue = e.newValue; Обе вкладки 1 и 2 записывают test в <p id="fromEvent">

Может кто-нибудь объяснить мне, почему они дают разные результаты?Я также тестировал этот код в Google Chrome и Firefox, и у них нет этой проблемы.

Просто для справки, он работал на win 7 Ultimate 64 SP1 с IIS Express и с использованием jquery-1.50,1.и ошибка в 32- и 64-битной версии IE9

Edit Протестировано с нормальным IIS 7.5 тот же результат

Edit 2 Было быхорошо, если кто-то может подтвердить, что это с ними происходит?

1 Ответ

5 голосов
/ 19 февраля 2012

Что касается того, почему они возвращают разные результаты, ответ довольно очевиден.Событие storage в IE вызывается до , значение изменяется, и после в других браузерах.Вы можете подтвердить это, добавив небольшую задержку к вашему коду: 

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
}

Хотя я не знаю, почему это реализовано таким образом, но я предполагаю, что спецификация слишком расплывчата, а не сообщает, когда событие должно быть запущено.

Событие storage срабатывает при изменении области хранения, как описано в предыдущих двух разделах (для хранения сеанса, для локального хранения).

Когда это происходит, пользовательский агент должен поставить задачу в очередь для запуска события с именем хранилища,который не всплывает и не может быть отменен, и который использует интерфейс StorageEvent в каждом окне объекте, у которого Document объект имеет хранилище затрагиваемый объект.

...