gpt4 book ai didi

javascript - 如何使用 Javascript 监听值变化的特定键?

转载 作者:行者123 更新时间:2023-12-01 21:39:01 31 4
gpt4 key购买 nike

有没有办法监听特定键值的变化?使用下面给出的代码,每当本地存储发生变化时,我都会收到一个窗口警报,它运行良好,但我正在寻找的是为键添加一个事件监听器:“数据”。

<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

最佳答案

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 - 如何使用 Javascript 监听值变化的特定键?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61586837/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com