Como armazenar e recuperar dados no navegador
Este artigo discutirá o procedimento para armazenando e recuperar dados no navegador. Além disso, exemplos relacionados ao uso de objetos Web LocalStorage e SessionStorage HTML serão fornecidos. Então vamos começar!
Objetos de armazenamento da Web no navegador
Dois objetos de armazenamento da Web são fornecidos pelo HTML, que você pode usar para armazenar e buscar os dados. ““LocalStorage”É um tipo de armazenamento HTML que não tem uma data de validade, enquanto o“SessionStorage”O objeto armazena apenas as informações relacionadas a uma única sessão, o que significa que o fechamento da guia atual do navegador removerá todos os dados salvos.
Antes de usar o LocalStorage e a SessionStorage, verifique se o armazenamento da Web HTML é suportado pelo seu navegador:
if (typeof (armazenamento) !== "indefinido")// Escreva o código para objetos de armazenamento HTML
outro
// Seu navegador não é suportado
LocalStorage HTML Web Storage Object no navegador
Como mencionado anteriormente, os dados armazenados no objeto LocalStorage não têm data de vencimento e não são excluídos, mesmo que seu navegador esteja fechado. Os dados armazenados podem ser recuperados no dia seguinte, semana ou ano.
Exemplo 1: Usando o objeto LocalStorage HTML Web Storage no navegador
No exemplo abaixo, criamos um “LocalStorage“Objeto da web com um“Nome: Valor”Par:
Execute o programa acima do seu editor de código favorito ou qualquer caixa de areia de codificação on-line; No entanto, utilizaremos o JSBIN para esse fim:
Como você pode ver na saída, armazenamos e recuperamos dados com sucesso usando o “LocalStorage”HTML Web Object:
Você também pode executar o seguinte código para o mesmo objetivo:
O exemplo fornecido também mostrará a mesma saída:
Se você deseja remover um item ou entrada do seu objeto LocalStorage, então você deve chamar o “remover item()”Método e passe o“nome”Item como um argumento:
LocalStorage.removetem ("nome");Exemplo 2: Usando o objeto LocalStorage HTML Web Storage no navegador
Vamos verificar outro exemplo. No programa JavaScript abaixo do dado o “LocalStorage”O objeto contará e armazenará o número de vezes que um usuário clicou no“Clique" botão:
Clique no botão para verificar o valor do contador.
Aqui, a saída está mostrando um “Clique" botão; Clique nele para verificar o valor do ButtonClickCounter:
Inicialmente, o valor do ButtonClickCounter foi definido como “0,”E será incrementado sempre que clicarmos no botão:
sessionStorage HTML Web Storage Object no navegador
O html “SessionStorage”O objeto funciona da mesma forma que“LocalStorage“; No entanto, você só pode usá -lo para armazenar e recuperar dados para a sessão atual. Assim que a guia Open Browser for fechado, todos os dados armazenados serão excluídos.
Exemplo 2: Usando o objeto SessionStorage HTML Web Storage no navegador
O programa JavaScript a seguir armazenará e recuperará o “ButtonClickCount”Para a sessão atual. O ButtonClickCount é adicionado para contar o número de vezes que um usuário clicou no botão fornecido:
Clique no botão para verificar o valor do contador.
Atingir o botão destacado é recuperar os dados armazenados no “SessionStorage" botão:
Conclusão
Os desenvolvedores podem utilizar LocalStorage e SessionStorage Objetos da web html para armazenar e recuperar dados no navegador. O objeto LocalStorage não possui uma data de validade, enquanto o SessionStorage armazena apenas as informações relacionadas a uma única sessão, o que significa que o fechamento da guia do navegador atual removerá todos os dados salvos. Este artigo discutiu o procedimento para armazenar e recuperar dados no navegador. Além disso, exemplos relacionados ao uso do LocalStorage e SessionStorage HTML Web também são fornecidos.