Question

如果sessionValue不是console.log

，我正在尝试不断观察sessionStorage值的变化并执行null

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

问题是我觉得使用setInterval方法并不是那么好。还有什么可以做，而不是使用setInterval。 ES6代理可以实现观察者。

Answer 1

JS中的投票是一种误解的表现。在JS中，您希望编写代码，以便在发生更改时告知您，而不是编写代码来检查它是否已更改。

在这种情况下，对会话存储的更改会在窗口上发出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

请注意，只有另一个页面更改了存储的值时才会触发此事件。如果您的自己的应用程序正在进行更改，则由您编写代码，以便在发生更改时通知其他代码段。例如，您可以在自己的代码中编写一个可以附加回调的对象，作为中间函数。

Answer 2

为什么不围绕sessionStorage访问编写包装并在get / set上挂钩一些操作？

＆＃13;

function makeSSPersistence(callback) {
  return {
    setItem: function(key, value) {
      window.sessionStorage.setItem(key, value)
      callback()
    },
    removeItem: function(key) {
      window.sessionStorage.removeItem(key)
      callback()
    },
    getItem: function(key) {
      return window.sessionStorage.getItem(key)
    }
  }
}

function checkCallback() {
  if (sessionStorage.getItem('Data') !== null) {
    console.log('Success')
  }
}

var ss = makeSSPersistence(checkCallback)

ss.setItem('Test', 12345)
ss.setItem('Data', 12312412)
ss.removeItem('Data')

＆＃13;

此外，您可以在window对象上设置侦听器并侦听storage事件，该事件会通知您是否对存储进行了某些操作。

不断关注价值变化

2 个答案: