LocalStorage e SessionStorage | Explicado

A API da Web e a API de armazenamento da Web são duas das APIs mais úteis que são suportadas pela maioria dos navegadores, a API de armazenamento da Web prova dois objetos LocalStorage armazenamento e o SessionStorage que nos ajudam a armazenar nossos dados na memória do navegador. Ambos os objetos nos permitem armazenar dados localmente, com a única diferença sendo que, com o objeto SessionStorage, os dados são excluídos automaticamente quando a sessão expira, enquanto que com o objeto LocalStorage os dados são salvos permanentemente.

Esses objetos podem ser considerados como alternativas para cookies e também têm suas vantagens sobre os cookies, dizendo que esses objetos podem ultrapassar os cookies completamente não é verdadeira. Os cookies podem ser lidos por servidores e outros aplicativos da Web, enquanto os dados armazenados localmente no seu navegador não podem ser lidos por qualquer servidor que ofereça benefícios de segurança.

LocalStorage e SessionStorage | Sintaxe

Ambos os objetos têm funções idênticas com sintaxes idênticas. A sintaxe para o objeto LocalStorage é definida como

LocalStorage.função (chave, valor);

Da mesma forma, para o objeto SessionStorage, a sintaxe é definida como

SessionStorage.função (chave, valor);

Funções fornecidas pela LocalStorage & SessionStorage

Ambos os objetos da API de armazenamento da Web fornecem 5 funções e uma variável const como:

• setItem (): para armazenar uma nova entrada no armazenamento local na forma de pares de valor-chave
• getItem (): para buscar uma entrada do armazenamento local usando sua chave
• claro (): para limpar o armazenamento local do navegador
• remover (): para remover um valor do armazenamento local usando uma chave
• key (): para retornar o nome da chave usando seu valor de índice
• comprimento (): uma variável que armazena o número de entradas no armazenamento local

LocalStorage e SessionStorage | Uso

Para demonstrar o uso da API de armazenamento da Web, abra o navegador de sua escolha (Chrome em nosso caso) e visite um site como www.Google.com.

Como criar/adicionar dados no Método LocalStorage usando SetItem ()

Crie uma nova entrada de dados no armazenamento local digitando a seguinte linha de código no console do navegador:

LocalStorage.setItem ("Nome", "John Doe");

Se o comando executar sem nenhum erro, isso significa que uma nova entrada foi feita com sucesso no armazenamento do navegador.

Para verificar isso, vá para a guia "Aplicativos" nas ferramentas do desenvolvedor e expanda o armazenamento local. Você deve poder ver o valor no Explorer:

Como acessar/obter dados do Método LocalStorage usando getItem ()

Para acessar qualquer entrada do armazenamento local, você pode usar um operador de ponto com o objeto LocalStorage e depois inserir a chave ou usar a função getItem (). Para acessar o "nome" que acabamos de armazenar, podemos usar:

Var Nome = LocalStorage.Nome;
console.log (nome)

A saída é como:

Ou podemos usar o comando como mostrado:

console.Log (LocalStorage.getItem ("nome"));

A saída é tão

Armazenamento permanente do objeto LocalStorage | Verificação

Para verificar se o objeto LocalStorage armazena dados permanentemente (até remover manualmente), feche os navegadores que haviam aberto anteriormente o link onde você armazenou alguns dados (no nosso caso, o Google era o Google.com)

Você terminou o aperto de mão de ouro e encerrou as sessões atuais com o site fechando os navegadores, reabrir o navegador e acesse o mesmo site e depois entre em ferramentas de desenvolvedor> Aplicações> Armazenamento local para verificar se os dados ainda estão lá ou não :

Todas as etapas acima podem ser feitas com o objeto SessionStorage, mas lembre -se de que ele excluirá todos os dados quando a sessão expirar. Vamos ver a demonstração.

Como criar/adicionar dados no método SessionStorage usando setItem ()

Primeiro, criaremos uma nova entrada no sessão com a seguinte linha de código:

SessionStorage.setItem ("Job", "Auditor");

O console exibe "indefinido", o que significa que o comando foi executado com sucesso sem nenhum erro:

Podemos verificar o armazenamento na guia de armazenamento da sessão:

Feche os navegadores e reabrir o mesmo link e depois vá para as ferramentas do desenvolvedor> Aplicativos> Armazenamento de sessões, você verá os seguintes resultados:

Você pode ver que a entrada foi excluída, isso prova que o objeto SessionStorage apenas armazena dados para o armazenamento local do navegador para apenas uma sessão.

Conclusão

Os objetos LocalStorage e SessionStorage são usados ​​para armazenar dados no armazenamento local do navegador e fazem parte da API de armazenamento da Web; Ambos os objetos fornecem 5 funções ao usuário que permitem aos usuários criar, atualizar, obter e excluir uma entrada do armazenamento local. A diferença entre o objeto LocalStorage e SessionStorage é que o objeto LocalStorage armazena permanentemente os dados em um site, enquanto o objeto Sessionstroage armazena apenas os dados para uma sessão.