javascript - 持续关注值(value)变化

Question

我正在尝试不断监视 sessionStorage 值的变化，并在 sessionValue 不为 null 时执行 console.log

  let intervalId = setInterval(function () {   
     if (sessionStorage.getItem('Data') !== null) {
            console.log('Success');
            clearInterval(intervalId);
        }
    }, 500);

问题是我觉得使用 setInterval 方法不太好。除了使用 setInterval 之外，还能做什么。 ES6代理可以实现观察者吗？

Answer 1

JS 中的轮询是一种误解。在 JS 中，您希望编写代码以便在某些内容发生变化时您会收到通知，而不是编写代码来检查它是否已更改。

在这种情况下，对 session 存储的更改会在窗口上发出 storage 事件:https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Responding_to_storage_changes_with_the_StorageEvent

所以你可以这样做

window.addEventListener('storage', function(e) {
  if (e.storageArea === sessionStorage && e.key === 'Data') {
    // Something on another page changed the stored value.
  }
});

您可以查看文档以了解有关 e 上存在哪些属性的信息:https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent

请注意，仅当另一个页面更改存储的值时才会触发此事件。如果是您自己的应用程序进行更改，则需要您编写代码，以便在发生更改时可以通知其他代码段。例如，您可以编写一个在您自己的代码中随处使用的对象，您可以将回调附加到该对象上，以充当中间体。