如何解释浏览器之间的不同“存储”事件行为？答案

【问题标题】：How do I account for different "storage" event behavior between browsers?如何解释浏览器之间的不同“存储”事件行为？
【发布时间】：2012-05-14 00:52:56
【问题描述】：

Bug with Chrome's localStorage implementation? 很好地解释了规范，以及它在 Opera 和 IE9 中的不同表现。

但是，现在呢？

这真的会弄乱我的代码（任何代码），因为它依赖于实现在浏览器上是一种方式，而实际上是另一种方式。

如何测试以了解事件是否在调用它的窗口上触发？

我唯一能想到的是使用 setTimeout() 来等待并查看事件是否在调用它的窗口中触发，如果没有，则执行某些操作。但是，当存储事件被快速连续调用时，这可能会产生一些可怕的错误。

在我的情况下，我需要为所有窗口触发事件，而不是所有窗口，而是调用它的窗口。在按照规范正确实现它的 Chrome 中，这只是在添加到 localStorage.setItem() 之后添加一个额外函数的问题，但是在 IE、Firefox3.6 和 Opera 中，它会有效地执行两次。我也可以根据浏览器使用不同的代码，但我应该测试兼容性而不是浏览器版本。

有没有办法为所有支持 localStorage 的浏览器“打补丁”，让所有浏览器都以相同的方式处理事件？

【问题讨论】：

似乎可以通过“在开始时”编写一个包含唯一 ID 的密钥来进行兼容性测试，例如时间戳，然后在返回时记录。如果事件没有返回，那么您的代码应该继续并在更改存储时在本地触发它。否则绕过该逻辑。粗略的想法......不是答案。
是的。我也在考虑这一点，但我也属于“可能有错误且不好的做法”。我认为解决方案需要类似于那些在没有它的情况下向浏览器添加 JSON 解析和字符串化支持的补丁，但在这种情况下会覆盖 localStorage 事件。不过，我不知道从哪里开始做这样的事情。我什至不知道如何查看当前代码的样子，或者如果可能的话，我什至不知道我什至需要覆盖哪些函数。
当你与猪（任性的浏览器）搏斗时，你会变得肮脏。如果还没有这样的库，那么编写这样的库会很有趣。问题是什么是最好的能力测试。如果我找到答案，我会发布答案。
由于问题存在的用户多于不存在的用户，因此在设置存储时忘记该事件并抛出您自己的事件是有意义的。您可以保存具有最新值和新值的对象，例如规范，并在处理事件时读取它。

标签： javascript javascript-events

【解决方案1】：

我解决了我自己的问题

var localStorageSpecCompliant = true;
var specCompliantTestVal = new Date().getTime();
function onStorage(ev) {
    if( ev.key == "specCompliantTest"+specCompliantTestVal ){
        localStorageSpecCompliant = false;
    }
    localStorage.removeItem("specCompliantTest"+specCompliantTestVal);
};
if( window.addEventListener ){  
    window.addEventListener("storage", onStorage, false);  
} else { window.attachEvent("onstorage", onStorage); }

localStorage["specCompliantTest"+specCompliantTestVal] = "This tests if the browsers localStorage storage event is spec compliant or ont.";

localStorage_setItem = function(key, value){
    localStorage[key] = value;
    if( localStorageSpecCompliant ){
        var dirtyFakeEvent = {"key":key, "newValue":value};
        onStorage(dirtyFakeEvent);
    }
}

但总能使活动正常运行的某种补丁会好得多。这种方式并不理想。我不知道如何假触发真正的“存储”事件，所以我直接调用了该函数。

一个简单地修复合规性的框架会很棒。我对 IE7 中不存在的 localStorage 没有问题。但是功能在一个或另一个浏览器中完全不同，与规范不同，这是很成问题的。

【讨论】：

【解决方案2】：

我对此很好奇，看了几个js存储库。到目前为止，我发现支持存储事件的是 YUI 2 Storage Utility。看看它是否可以规范跨浏览器的行为会很有趣。还有一个基于 YUI3 的库，看起来很有趣，并宣传了一个更改事件和一个存储就绪事件。

YUI 2 Storage

YUI 3 based Storage Lite

这些可能涉及比您想要的更多的依赖项。它们还可能提供学习如何更简单地解决问题的方法。

这些库还解决了如何处理不提供 HTML5 样式存储的浏览器的问题。

【讨论】：

当我已经使用 jQuery 和下划线时，我不想添加另一个库。不过，该 API 看起来确实不错。当存储更改时，它似乎包含一个跨窗口事件，这是这里的一个问题。我更喜欢简单地使用 localStorage。不久前我看过一个类似的 jQuery 插件，但并没有留下深刻的印象。