Как прослушать указанный ключ c при изменении значения с Javascript? - PullRequest
Новая
       82

Как прослушать указанный ключ c при изменении значения с Javascript?

0 голосов
/ 04 мая 2020

есть ли способ прослушать изменение значения для указанного ключа c? С приведенным ниже кодом я получаю предупреждение окна каждый раз, когда происходит изменение в локальном хранилище, оно работает хорошо, но я ищу, чтобы добавить прослушиватель событий только для ключа: «Данные». 

<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

1 Ответ

4 голосов
/ 04 мая 2020

Событие storage сообщает вам, какой ключ изменился через его свойство 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
    });
}

Если вы измените обработчики кнопок для использования этих функций, вы получите уведомления как для изменений, сделанных в окне, и для изменений, сделанных в другом windows.

Живой пример на JSBin (который является одним из немногих, который позволяет нам использовать локальное хранилище).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...