相关疑难解决方法(0)

以下示例需要在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然后它test 在我的正确显示<p id="fromEvent">但在我的标签2中 它只写tes …

我正在处理该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>');
        }
    });
});

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