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

在挖掘tutorial时，我发现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显示本地存储的旧值

1 个答案: