Question

我有以下示例代码（托管在https://d-dsuo5j1fc.now.sh/上）应显示2个不断变化的日期字符串。第一个是在简单的500ms循环中，第二个是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不兼容的好的资源的任何建议吗？

Answer 1

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

这里有一个视频，显示存储事件在iPhone 5上的iOS 6上运行正常（相同的代码刚刚更改为支持ES5，let转换为var，箭头功能转换为正常功能）。但是，一旦打开私人浏览，它就会停止工作。

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

Answer 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。

iOS Safari是否支持storageEvents？

2 个答案:

编辑＃1