Question

有没有办法监听特定键的值更改？有了下面给出的代码，每次本地存储发生变化时，我都会收到一个窗口警报，它可以正常工作，但是我想要添加一个仅用于键“ Data”的事件侦听器。

<body>
  <button onClick="setData1()">Set 1</button>
  <button onClick="setData2()">Set 2</button>
<button onClick="clearData()">Clear</button>
</body>
</html>
<script>
window.addEventListener('storage', function(e) {  
alert('Woohoo, someone changed my localstorage!');
});

function setData1(){
  console.log('SET');
  localStorage.setItem('Data', '1');
}

function setData2(){
  console.log('SET');
  localStorage.setItem('Data', '2');
}

function clearData(){
  console.log('CLEAR');
  localStorage.clear()
}

</script>

https://codepen.io/rahman23/pen/KKdyGOw

Answer 1

storage event通过其key属性告诉您更改了哪些键，因此您可以使用它来决定是否执行alert：

window.addEventListener('storage', function(e) {  
    if (e.key === "Data") {
        alert('Woohoo, someone changed my localstorage!');
    }
});

请注意，只有在不同窗口（而不是同一窗口）中更改值时，才会触发该事件。（我假设您已经知道了，正如您所说的，alert。）例如，如果在两个选项卡中运行页面，则单击一个选项卡中的按钮会在另一个选项卡中导致事件，但不会单击按钮的那个。

在一条评论中，您说过您想从同一窗口进行的更改中获取通知。唯一的方法是为setItem编写包装函数并直接调用处理程序，如下所示：

function storageChanged({key, oldValue, newValue}) {
    if (key === "Data") {
        const isNew = oldValue === null && newValue !== null;
        console.log(`Data event, new value = "${newValue}". First time? ${isNew ? "Yes" : "No"}`);
    }
}

window.addEventListener('storage', storageChanged);

function setLocalStorage(key, newValue) {
    newValue = String(newValue);
    const oldValue = localStorage.getItem(key);
    localStorage.setItem(key, newValue);
    storageChanged({
        key,
        oldValue,
        newValue,
        storageArea: localStorage,
        url: window.location.url
    });
}

function clearLocalStorage() {
    localStorage.clear();
    storageChanged({
        key: null,
        oldValue: null,
        newValue: null,
        storageArea: localStorage,
        url: window.location.url
    });
}

如果将按钮处理程序更改为使用这些功能，则会同时收到有关在窗口中进行的更改和在其他窗口中进行的更改的通知。

Live example on JSBin（这是允许我们使用本地存储的少数几个软件之一）。

如何用JavaScript监听值更改的特定键？

1 个答案: