admin管理员组

文章数量:1323551

is there a way to listen value change for specific key? With below given code I get a window alert eachtime there is a change in local storage it works well but what i am looking for to add a event listener just for key : "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>

is there a way to listen value change for specific key? With below given code I get a window alert eachtime there is a change in local storage it works well but what i am looking for to add a event listener just for key : "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

Share Improve this question asked May 4, 2020 at 7:08 user1953051user1953051 6112 gold badges11 silver badges24 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

The storage event tells you what key changed via its key property, so you can use that to decide whether to do your alert:

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

Note that the event will only be fired if the value is changed in a different window, not the same window. (I assume you know this, as you said you were getting the alert.) If you ran your page in two tabs, for instance, clicking your buttons in one tab would cause the event in the other, but not in the one where you clicked the button.

In a ment you said you wanted to get notifications from changes made by the same window. The only way to do that is to write a wrapper function for setItem and call your handler directly, something like this:

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
    });
}

If you change your button handlers to use those functions, you get notifications both for changes made in the window and for changes made in other windows.

Live example on JSBin (which is one of the few that lets us use local storage).

本文标签: htmlHow to listen a specific key on value change with JavascriptStack Overflow