不斷關注價值變化

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要編寫代碼，這樣當有新的變化，而不是編寫代碼來檢查它是否改變了你會被告知。

在這種情況下，對會話存儲的更改將在窗口上發出storage事件： https : //developer.mozilla.org/zh-CN/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上掛接一些操作？

 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') 

您還可以在window對象上設置偵聽window並偵聽storage事件，該事件會通知您是否對存儲進行了某些操作。