JavaScript (frequentemente abreviado como JS) é uma das bases da infraestrutura web moderna. É uma linguagem de programação leve, interpretada e orientada a objetos que suporta funções de primeira classe. O JavaScript é conhecido principalmente por sua implementação em páginas web dinâmicas. Devido aos seus recursos, no entanto, o JavaScript também é usado em ambientes fora do navegador.
Neste guia, discutiremos em detalhes dois objetos JavaScript: localStorage e sessionStorage.
Visão geral do localStorage e sessionStorage
Os objetos localStorage e sessionStorage são oferecidos como parte da API de armazenamento web. É uma ótima ferramenta para armazenamento local de pares chave-valor. Usar localStorage e sessionStorage é uma ótima alternativa aos cookies. Essa abordagem oferece alguns benefícios extras:
- Os dados são armazenados localmente e não podem ser lidos pelo servidor. Isso elimina os problemas de segurança com cookies.
- Permite maior capacidade de armazenamento (até 10 MB para a maioria dos navegadores modernos).
- Sintaxe simples e direta.
Esses objetos são suportados em todos os navegadores web modernos, portanto não haverá problemas de compatibilidade de navegador. Os cookies ainda são úteis em muitas situações, por exemplo, autenticação. No entanto, existem situações em que localStorage e sessionStorage oferecem soluções melhores.
Pré-requisitos
Para realizar as etapas mostradas neste tutorial, você precisará dos seguintes componentes:
- Um servidor Linux configurado corretamente. Este guia demonstra a configuração do seu próprio servidor Ubuntu na CloudSigma.
- Node.js como o ambiente de execução JavaScript. Saiba mais sobre como instalar o Node.js no Ubuntu aqui.
- Um navegador web moderno, por exemplo, Google Chrome ou Firefox.
Para demonstração, pegamos uma página web de exemplo anexada a um script JS. Você pode aprender mais sobre como adicionar JavaScript a um arquivo HTML aqui:
Quanto ao editor de texto, usaremos o Visual Studio Code:
Qual é a diferença entre localStorage e sessionStorage?
Ambos localStorage e sessionStorage originam-se da mesma API. Seus comportamentos também são idênticos. A única diferença está na maneira como cada objeto permite a persistência de dados. No caso do sessionStorage, os dados persistem até que a janela ou aba seja fechada. Com o localStorage, os dados persistem até que o cache do navegador seja limpo ou o aplicativo web os limpe.
Neste tutorial, focaremos principalmente no localStorage. No entanto, a sintaxe para o sessionStorage é a mesma. Mostraremos como criar, ler e atualizar pares chave/valor usando o localStorage.
Passo 1 – Criando Entradas
Podemos declarar uma entrada no objeto localStorage usando setItem(). Este método aceita dois argumentos: a chave e seu valor correspondente. A estrutura do método é a seguinte:
|
1 |
localStorage.setItem(<chave>, <valor>) |
No exemplo a seguir, criamos uma variável key. Usando o método setItem(), definimos uma nova chave e definimos seu valor como ‘value’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
Passo 2 – Lendo Entradas
Agora, como lemos o valor armazenado na chave? Para obter uma chave do localStorage, usaremos o método getItem(). Ele aceita o nome da chave e retorna os valores armazenados nela. Usaremos o método alert() para exibir o conteúdo que buscamos:
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
Em seguida, abra a página web em um navegador. Ela deve mostrar o valor armazenado na chave:
Passo 3 – Atualizando Entradas
Uma vez que um valor é definido, ele permanecerá assim a menos que seja alterado. Se usarmos o método setItem() na mesma chave novamente, ele substituirá automaticamente o valor antigo pelo novo.
No exemplo a seguir, a chave é inicialmente iniciada com o valor ‘value’. Na linha seguinte, chamamos setItem() mais uma vez e definimos o valor como ‘novo valor’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
Vejamos o que acontece quando executamos este código no navegador:
Como podemos ver, o valor da chave é definido como ‘novo valor’.
Passo 4 – Removendo Entradas
Se houver múltiplas entradas no localStorage (e sessionStorage também) que não são mais necessárias, é recomendável limpá-las depois. Isso abre mais espaço para uso posterior. O aplicativo também se torna mais eficiente em termos de memória.
Para excluir uma entrada do localStorage, existe um método dedicado removeItem(). Ele recebe a chave como argumento e a remove do localStorage pool de dados:
|
1 |
localStorage.removeItem(<key_to_remove>) |
Vamos implementá-lo em nosso script:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
Quando executado, a saída diz null porque não existe valor para a chave:
Passo 5 – Limpando Entradas
No exemplo anterior, removemos apenas uma chave. No entanto, o localStorage permite limpar todos os itens armazenados em uma única etapa. Para limpar todas as entradas, o localStorage oferece o método clear(). Ele não recebe argumentos:
|
1 |
localStorage.clear(); |
Coloque o método em ação:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
Assim como antes, ele remove todas as entradas do localStorage, então, ao tentar acessar o valor da chave , ele retorna null:
Passo 6 – Trabalhando com JSON
-
Armazenando Objetos e Arrays
Os objetos localStorage e sessionStorage só podem armazenar valores de string. No entanto, haverá momentos em que você terá que trabalhar com objetos ou arrays. Nesse caso, precisamos convertê-los em uma string.
O JavaScript vem com o recurso JSON.stringify() que pegará o array/objeto e o converterá em strings. Este post oferece uma visão geral rápida do formato JSON. Para um guia mais detalhado, você pode ler JSON em JavaScript.
Neste exemplo, criamos um objeto sampleObj com dois campos name e location. Nós o converteremos em uma string e o armazenaremos na chave:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
Aqui, a saída será a string contendo os dados do objeto:
-
Lendo Objetos e Arrays
Ao armazenar, convertemos objetos e arrays em strings. Podemos pegar essa string e convertê-la de volta ao seu formato original também. Para fazer isso, usaremos o método JSON.parse(). Ele recebe uma string e a converte de volta para o formato JSON:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
Quanto à saída, nós a convertemos novamente em uma string e a formatamos para uma melhor visualização:
Passo 7 – Verificando Item no localStorage
Nesta seção, mostraremos um teste simples para determinar se o localStorage e o sessionStorage contêm algum item ou não. Usando uma simples if instrução, podemos verificar o comprimento de localStorage ou sessionStorage. Se houver itens, o comprimento será maior que 0.
Primeiro, implemente o seguinte exemplo:
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
Aqui, a saída será ‘true’ porque existe uma chave em localStorage:
Passo 8 – Iterando sobre itens
Os objetos localStorage e sessionStorage armazenam as chaves em uma estrutura semelhante a um array. Eles não suportam o método forEach , por isso teremos que seguir a técnica clássica de usar um loop for para iterar sobre cada item.
No exemplo a seguir, verificaremos se o localStorage está vazio ou não. Se não estiver vazio, iteraremos sobre cada item:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
A saída mostrará todos os itens um por um:
Passo 9 – Verificar o suporte do navegador
Podemos verificar o suporte para localStorage (e sessionStorage) verificando se está disponível no objeto window. Uma simples instrução if resolverá o problema:
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
Execute o código no navegador web:
Considerações Finais
Este guia demonstrou como usar os objetos localStorage e sessionStorage no JavaScript para armazenar pares de chave/valor no navegador. As sintaxes são muito mais simples de trabalhar. Mostramos como criar, remover e atualizar pares de chave/valor. Também abordamos o armazenamento de objetos e arrays convertendo-os em strings (e vice-versa).
Para aprofundar ainda mais seus conhecimentos em JavaScript, você pode conferir os seguintes tutoriais do nosso blog:
- Fundamentos do JavaScript: Como trabalhar com data e hora
- JavaScript: Um tutorial sobre como indexar, dividir e manipular strings
- Trabalhando com JavaScript: Como as classes funcionam
- Trabalhando com JavaScript: Como funcionam os protótipos e as heranças
Boa programação!
Comentários
Nenhum comentário ainda. Seja o primeiro.