Question

在Internet Explorer 9＆amp; 10，localStorage实现意外触发事件（这里的大线程：Bug with Chrome's localStorage implementation?）

是否有人知道如何阻止storage事件触发在Internet Explorer中启动更改的标签页？

例如，单击添加按钮时，以下内容不应显示警告，但在IE中显示警告：

<!DOCTYPE html>
<html>
  <head>
    <title>Chrome localStorage Test</title>
    <script type="text/javascript" >

      var handle_storage = function () {
        alert('storage event');
      };

      window.addEventListener("storage", handle_storage, false);

    </script>
  </head>
  <body>
    <button id="add" onclick="localStorage.setItem('a','test')">Add</button>
    <button id="clear" onclick="localStorage.clear()">Clear</button>
  </body>
</html>

编辑：另外，我在这里打开了一个MS的错误。 https://connect.microsoft.com/IE/feedback/details/798684/ie-localstorage-event-misfired

也许它不会被关闭.....

Answer 1

将脚本更改为以下内容可防止在焦点窗口中处理任何存储事件。

这并不是你提出的问题，因为我认为这需要修补程序，但它会使IE 9/10符合规范，同时对其他浏览器没有任何负面影响（除了全局和听众）。

<script type="text/javascript" >
      var focused;

      window.addEventListener('focus', function(){focused=1;}, false);
      window.addEventListener('blur', function(){focused=0;}, false);

      var handle_storage = function (e) {
        if(!focused)
          alert("Storage",focused);
      };

      window.addEventListener("storage", handle_storage, false);

</script>

请参阅this fiddle了解更新的符合规定的行为。

编辑：以下内容也有效，避免了以窗口焦点运行时检查为代价的侦听器：

<script type="text/javascript" >

      var handle_storage = function (e) {
        if(!document.hasFocus())
          alert("Storage");
      };

      window.addEventListener("storage", handle_storage, false);

</script>

Answer 2

如果您正在寻找解决方法，可以使用信号量为localStorage编写包装器。

试试这个（未经测试）：

var BetterStorage = {
    _semaphore: false,
    setItem: function(key, item) {
        var that = this;
        this._semaphore = 1; // only this tab
        localStorage.setItem(key, item);
        this._semaphore = 0;
        // or setTimeout(function(){that._semaphore = 0}, 10)
        // based on event-fire time (immedietaly or after short delay?)
        // not tested
    },
    getItem: function() {/*code*/},
    createHandler: function(f) {
        var that = this;
        return function(e){
            if (that._semaphore) { // execution of event is blocked
                return false;
            }
            else {
                return f(e);
            }
        }
    }
}


var handle_storage = BetterStorage.createHandler(function () {
        alert('storage event');
});
window.addEventListener("storage", handle_storage, false);

IE localStorage事件失败了

2 个答案: