Código de exemplo para implementar a comunicação entre páginas usando eventos de armazenamento

Todos nós sabemos que as duas condições a seguir devem ser atendidas para acionar window.onstorage:

• Salve (atualize) um armazenamento por meio de localStorage.setItem ou sessionStorage.setItem
• Ao salvar (atualizar) este armazenamento, seu novo valor deverá ser diferente do valor anterior

A segunda condição acima, simplesmente, é: ou a inicialização do armazenamento, porque o armazenamento não existe, seu valor é nulo ou é a atualização do armazenamento existente;

Exemplo:

 // Inicializar storagewindow.localStorage.setItem('a', 123); // Registrar evento de armazenamento window.onstorage = (e) => { console.log(e);} // Atualizar storagewindow.localStorage.setItem(' a', 123);

A última linha do código acima não aciona o evento onstorage, pois o valor de a não mudou, é 123 antes e depois, então o navegador determina que esta atualização é inválida.

Como o evento onstorage é acionado pelo navegador, se abrirmos múltiplas páginas sob o mesmo nome de domínio e executarmos o método window.localStorage.setItem em qualquer uma delas (devemos também garantir que o segundo item mencionado no início do artigo for atendida) condição), então, se outras páginas ouvirem o evento onstorage, os retornos de chamada do evento onstorage nessas páginas serão executados.

Exemplo:

 // http://www.example.com/a.html<script>// Registra evento de armazenamento window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/b.html<script>// Registra evento de armazenamento window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/c.html<script>// Aciona o evento de armazenamento window.localStorage.setItem('a', new Date().getTime());</script>

Contanto que a página c seja aberta após as páginas a e b (mesmo que as três páginas não estejam na mesma janela do navegador, você precisa distinguir a diferença entre a janela e a página da guia), então os eventos de armazenamento nas páginas a e b serão acionados.

Agora que sabemos como usar eventos de armazenamento para conseguir comunicação entre páginas, que utilidade essa comunicação tem para nós?

Na verdade, só precisamos saber qual operação de atualização de armazenamento acionou o evento onstorage. Então, como saberemos? O retorno de chamada do evento onstorage, como outras funções de retorno de chamada do evento, também recebe um parâmetro de objeto de evento. Existem três propriedades úteis neste objeto:

• key O nome da chave do armazenamento que está sendo inicializado ou atualizado
• oldValue é o valor antes do armazenamento ser inicializado ou atualizado.
• newValue é o valor após o armazenamento inicializado ou atualizado

Combinando esses 3 atributos principais, podemos conseguir a sincronização de dados entre as páginas

Finalmente, deixe-me mencionar a diferença entre localStorage e sessionStorage

Os dados armazenados em localStorage não têm configuração de tempo de expiração e os dados armazenados em sessionStorage serão apagados quando a sessão da página terminar.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.