Estou tentando atualizar automaticamente os dados enviados de outro arquivo JS usando localStorage setItem()e getItem(). Tentei usar o setInterval()método para atualizar automaticamente os dados para poder obter os dados recentes sem recarregar a página, mas não funcionou.
Aqui está o meu código:
Arquivo A:
document.getElementById('submit')
.addEventListener('click', function () {
var weight = document.form.weight.value;
localStorage.setItem('weight4page2', weight);
});
Arquivo B:
const weight = parseFloat(localStorage.getItem('weight4page2'));
const weightUpdated = setInterval(weight, 3000);
console.log(weight);
// I get the user inputted weight from JS file A
console.log(weightUpdated);
Portanto, recebo em 1vez do valor de entrada do arquivo A.
Ao fazer login console.log(weightUpdated)no arquivo B, você registra o intervalIDretorno de setInterval(). Este é um valor numérico que identifica o temporizador e que pode ser usado posteriormente para cancelar o intervalo usando clearInterval().
O arquivo A parece bem, mas no arquivo B há alguns erros.
Primeiro, você não passa uma função para o setInterval()método, mas um número. Você deve passar uma função onde possa obter o item atualizado do localStorage. Em segundo lugar, você deve registrar o item recuperado aqui, não fora desta função. Confira o código abaixo:
function getWeightFromLS() {
const weight = parseFloat(localStorage.getItem("weight4page2"));
console.log({ time: new Date().toLocaleTimeString(), weight });
return weight;
}
// return id to cancel
const intervalID = setInterval(getWeightFromLS, 3000);
Também criei um sandbox para você, para que você possa verificá-lo ao vivo: https://codesandbox.io/s/form-submit-localstorage-2z79s
Uma abordagem melhor seria usar o padrão pubsub em vez disso setInterval();
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras