iOS Safari 是否支持 storageEvents？答案

【问题标题】：does iOS Safari support storageEvents?iOS Safari 是否支持 storageEvents？
【发布时间】：2019-08-27 06:02:50
【问题描述】：

我有以下示例代码（托管在 https://d-dsuo5j1fc.now.sh/），它应该显示 2 个不断变化的日期字符串。第一个是简单的 500 毫秒循环，第二个是 StorageEvent 的结果。这个想法是这个页面在两个选项卡中加载，这样每个选项卡都会收到另一个选项卡中本地存储更改的警报。

它在 Chrome/iOS 中运行良好，但在 Safari iOS 中，第二个字符串从未更新，这表明它没有触发 onStorage 事件。

<body>
    Own timer<span id='s'> </span><br>
    From storage event <span id='ev'> </span>
</body>
<script>
let s = document.getElementById('s');
let ev = document.getElementById('ev');
function onStorageEvent(storageEvent){
    ev.innerHTML = storageEvent.newValue;  // display the storage event value
}
window.addEventListener('storage', onStorageEvent, false);
// every 500ms, generate a new string, display it and write it to localstorage
setInterval(()=>{
    let d =  new Date().toGMTString() + ' ' + Math.random();
    s.innerHTML = d;    // display our fresh value
    localStorage.setItem('foo',d);  // and write it to localstorage
}
,500);
</script>

另外，对于 iOS 上 Safari 的 HTML5 不兼容问题，有什么好的资源建议吗？

【问题讨论】：

您是否在 Safari 上尝试过类似 alert(StorageEvent) 的操作？

标签： javascript html safari local-storage mobile-safari

【解决方案1】：

您是否在隐私浏览模式下进行测试？在这种情况下，由于 Apple 的隐私问题，Safari 的行为会有所不同。

这是一个视频，展示了 iPhone 5 上的 iOS 6 上的存储事件（相同的代码刚刚更改为支持 ES5，let 转换为 var，箭头函数转换为普通函数）。但是，一旦您打开隐私浏览，它就会停止工作。

https://www.youtube.com/watch?v=wo0kqHXrc_0

【讨论】：

这很奇怪......我无法让它从 iOS 10.3 向下运行（包括 iOS 10.3）。
哦，它确实不起作用。您的字符串没有按应有的方式更新。它应该每秒钟左右更新一次。
@Aaron3219 它不会每秒更新一次，因为它是移动设备并且两个选项卡不能同时工作。那时两个应用几乎不能同时运行。
嗯...所以它理论上可以工作。但是，理论上确实意味着理论上而不是实践中。所以在我的定义中它不;）同意？
你成功了。我无意中在私人标签中打开了。

【解决方案2】：

它在 Chrome/iOS 中运行良好，但在 Safari iOS 中，第二个字符串永远不会更新，这表明它没有触发 onStorage 事件。

我也用下面的代码试了一下：

let s = document.getElementById('s');
let ev = document.getElementById('ev');

function onStorageEvent(storageEvent) {
  ev.innerHTML = storageEvent.newValue; // display the storage event value
  document.getElementById("console").innerHTML += "<br>something has changed (Event type: '" + event.type + "')";
}
window.addEventListener('storage', onStorageEvent, false);
// every 500ms, generate a new string, display it and write it to localstorage
setInterval(() => {
  let d = new Date().toGMTString() + ' ' + Math.random();
  s.innerHTML = d; // display our fresh value
  localStorage.setItem('foo', d); // and write it to localstorage
}, 500);

Own timer<span id='s'> </span><br> From storage event <span id='ev'> </span>
<div id="console"></div>

这里是JSFiddle 链接，因为此示例在 SO 沙盒工具中不起作用。所以我在字符串中显示了event.type (document.getElementById("console").innerHTML += "<br>something has changed (Event type: '" + event.type + "')";) 以确保触发了正确的事件。但正如您在下面的 GIF 中看到的那样，它对我来说效果很好。我还做了一些其他测试来仔细检查，所有测试都运行良好。

我使用的是 iOS 12.4。

另外，对于 iOS 上 Safari 的 HTML5 不兼容问题，有什么好的资源建议吗？

为了三重检查，我还搜索了一些可靠的来源。最著名的是 caniuse.com（没有搜索结果）和 developer.mozilla，但即使他们也没有相关信息。

所以三重检查不起作用。但是，由于我自己已经尝试过使用不同的 iOS 版本（8、9、10、11），它显然确实有支持，我们可以回答这个问题：

iOS Safari 是否支持 storageEvents？

是的，它确实支持 iOS 11 及更高版本的 storageEvents。
如果您有任何问题，请告诉我。

编辑#1

顺便说一句，如果您想自己测试一下（如果您不像我一样拥有 iPhone），可以使用一些模拟器，例如 appetize.io。

【讨论】：