Internet Explorer 显示本地存储的旧值

Question

我正在处理该storage事件以同步浏览器窗口之间的更改。我注意到 Internet Explorer 似乎保留了旧值。

HTML 示例

<ul>
    <li data-aid="1" data-pid="1">1/1</li>
    <li data-aid="1" data-pid="2">1/2</li>
    <li data-aid="2" data-pid="3">2/3</li>
    <li data-aid="2" data-pid="4">2/4</li>
</ul>

示例 JS

$(document).ready(function() {
    localStorage.removeItem('li');
    $('li').on('click', function() {
        var $this = $(this);
        localStorage.setItem('li', JSON.stringify({
            aid : $this.data('aid'),
            pid : $this.data('pid')
        }));
    });
    $(window).on('storage', function(e) {
        // ignore Internet Explorer firing event in own window
        // ignore changes not to the 'li' key
        if (!document.hasFocus() && ('li' === e.originalEvent.key)) {
            $('body').append('<p>' + localStorage.getItem('li') + '</p>');
        }
    });
});

如果我打开两个窗口，然后单击每个列表项，第二个窗口将显示以下输出：

<p>null</p>
<p>{"aid":1,"pid":1}</p>
<p>{"aid":1,"pid":2}</p>
<p>{"aid":2,"pid":3}</p>

在 Chrome、Firefox 和 Safari 中，我得到了预期的输出：

<p>{"aid":1,"pid":1}</p>
<p>{"aid":1,"pid":2}</p>
<p>{"aid":2,"pid":3}</p>
<p>{"aid":2,"pid":4}</p>

Answer 1

在深入研究教程时，我发现该storage事件有一个newValue属性。更改我的侦听器以使用它，而不是从 读取localStorage，修复了 Internet Explorer 中的问题。它也适用于所有其他浏览器！

$(document).ready(function() {
    localStorage.removeItem('li');
    $('li').on('click', function() {
        var $this = $(this);
        localStorage.setItem('li', JSON.stringify({
            aid : $this.data('aid'),
            pid : $this.data('pid')
        }));
    });
    $(window).on('storage', function(e) {
        // ignore Internet Explorer firing event in own window
        // ignore changes not to the 'li' key
        if (!document.hasFocus() && ('li' === e.originalEvent.key)) {
            // use the event's newValue property instead of reading from storage
            // fixes issue with IE returning old value
            $('body').append('<p>' + e.originalEvent.newValue + '</p>');
        }
    });
});

更新

我发现有两个 SO 帖子提供了通过引入轻微延迟来解决问题的解决方案。我觉得我的解决方案更优雅一些。

• 为什么 Internet Explorer 有时会在数据准备好之前触发本地存储事件？
• localStorage.getItem 在 IE 9 中返回旧数据