O Armazenamento na Web é o que a API JavaScript dos navegadores fornece para armazenar dados localmente e de forma segura no navegador do usuário.

O armazenamento de sessão e local são os dois principais tipos de armazenamento na web. Eles são semelhantes a objetos de propriedades regulares, mas persistem (não desaparecem) quando a página da web é recarregada.

Este artigo tem como objetivo mostrar exatamente como os dois objetos de armazenamento funcionam em JavaScript

O que é o Objeto Session Storage?

O objeto de armazenamento de sessão (window.sessionStorage) armazena dados que persistem apenas durante uma sessão de uma guia aberta.

Em outras palavras, qualquer coisa que seja armazenada no objeto window.sessionStorage não desaparecerá ao recarregar a página da web. Em vez disso, o computador excluirá os dados armazenados apenas quando os usuários fecharem a guia ou janela do navegador.

Observe o seguinte:

• Os dados armazenados dentro do sessionStorage são por origem e por instância. Em outras palavras, o objeto sessionStorage de http://adevindev.xyz é diferente do objeto sessionStorage de https://adevindev.xyz porque as duas origens usam esquemas diferentes (http e https).
• Por instância significa por janela ou por guia. Em outras palavras, a vida útil do objeto sessionStorage expira quando os usuários fecham a instância (janela ou guia).
• Os navegadores criam uma sessão de página exclusiva para cada nova guia ou janela. Portanto, os usuários podem executar várias instâncias de um aplicativo sem interferir na sessionStorage de cada instância. (Observação: Os cookies não têm bom suporte para executar várias instâncias do mesmo aplicativo. Tal tentativa pode causar erros, como a entrada dupla de reservas.)
• O sessionStorage é uma propriedade do objeto Window global. Portanto, sessionStorage.setItem() é equivalente a window.sessionStorage.setItem().

O que é o Objeto Local Storage?

O objeto de armazenamento local (window.localStorage) armazena dados que persistem mesmo quando os usuários fecham a guia (ou janela) do navegador.

Em outras palavras, qualquer coisa que seja armazenada no objeto window.localStorage não desaparecerá durante uma recarga ou reabertura da página da web, nem quando os usuários fecham seus navegadores. Esses dados não têm um tempo de expiração e os navegadores nunca os eliminam automaticamente.

O computador apagará o conteúdo do objeto window.localStorage apenas nas seguintes instâncias:

• Quando o conteúdo é apagado através do JavaScript.
• Quando o cache do navegador é apagado.

Observe o seguinte:

• O limite de armazenamento do objeto window.localStorage é maior do que o do window.sessionStorage.
• Os dados armazenados dentro do armazenamento local são por origem. Em outras palavras, o objeto localStorage de http://adevindev.xyz é diferente do objeto localStorage de https://adevindev.xyz porque as duas origens usam esquemas diferentes (http e https).
• Existem inconsistências na forma como os navegadores lidam com o armazenamento local de documentos que não são servidos por um servidor web (por exemplo, páginas com um esquema de URL file:). Portanto, o objeto localStorage pode se comportar de maneira diferente entre os navegadores quando usado com URLs não HTTP, como file:///documento/em/usuários/sistema/local.html.
• O armazenamento local é uma propriedade do objeto Window global. Portanto, localStorage.setItem() é equivalente a window.localStorage.setItem().

Como Acessar os Objetos Session e Local Storage

Você pode acessar os dois armazenamentos na web por meio de:

1. Utilizando a mesma técnica que você usaria para acessar objetos JavaScript regulares.
2. Utilizando as interfaces integradas do armazenamento na web.

Por exemplo, considere o trecho abaixo:

sessionStorage.bestColor = "Preto";
sessionStorage["bestColor"] = "Preto";
sessionStorage.setItem("bestColor", "Preto");

As três instruções acima fazem a mesma coisa - elas definem o valor de bestColor. No entanto, a terceira linha é recomendada porque utiliza o método setItem() do armazenamento na web.

Dica: é preferível usar as interfaces integradas do armazenamento na web para evitar as armadilhas do uso de objetos como armazenamento de chave/valor.

Vamos discutir mais sobre as interfaces integradas do armazenamento na web abaixo.

Quais são as Interfaces Integradas do Armazenamento na Web?

As interfaces integradas do armazenamento na web são as ferramentas recomendadas para ler e manipular os objetos sessionStorage e localStorage de um navegador.

Existem seis (6) interfaces integradas:

1. setItem()
2. key()
3. getItem()
4. length
5. removeItem()
6. clear()

O que é o método setItem() do armazenamento na web?

O método setItem() armazena seus argumentos de chave (key) e valor (value) dentro do objeto de armazenamento na web especificado.

Sintaxe do método setItem()

O setItem() aceita dois argumentos obrigatórios. Aqui está a sintaxe:

webStorageObject.setItem(key, value);

webStorageObject representa o objeto de armazenamento (localStorage ou sessionStorage) que você deseja manipular.

key é o primeiro argumento aceito por setItem(). É uma string obrigatória que representa o nome da propriedade de armazenamento na web que você deseja criar ou atualizar.

value é o segundo argumento aceito por setItem(). É uma string obrigatória que especifica o valor da chave que você está criando ou atualizando.

Observação:

• Os argumentos key e value são sempre strings.
• Suponha que você forneça um número inteiro como key ou value. Nesse caso, os navegadores os converterão automaticamente para strings.
• O setItem() pode exibir uma mensagem de erro se o objeto de armazenamento estiver cheio.

Como armazenar dados no objeto de armazenamento de sessão

Chame o método setItem() do sessionStorage. Forneça o nome e o valor dos dados que você deseja armazenar.

// Armazena a cor "Rosa" dentro do objeto de armazenamento de sessão do navegador:
sessionStorage.setItem("color", "Rosa");

// Registra o objeto de armazenamento de sessão no console:
console.log(sessionStorage);

// A chamada acima retornará:
{color: "Rosa"}

Neste exemplo, o método setItem() do sessionStorage é utilizado para armazenar a cor "Rosa" com a chave "color". O console.log() é usado para exibir o objeto de armazenamento de sessão no console, mostrando que a cor "Rosa" foi armazenada com sucesso.

Como armazenar dados no objeto de armazenamento local

Chame o método setItem() do localStorage. Forneça o nome e o valor dos dados que você deseja armazenar.

// Armazena a cor "Rosa" dentro do objeto de armazenamento local do navegador:
localStorage.setItem("color", "Rosa");

// Registra o objeto de armazenamento local no console:
console.log(localStorage);

// A chamada acima retornará:
{color: "Rosa"}

Neste exemplo, o método setItem() do localStorage é utilizado para armazenar a cor "Rosa" com a chave "color". O console.log() é usado para exibir o objeto de armazenamento local no console, mostrando que a cor "Rosa" foi armazenada com sucesso.

Os navegadores utilizam "[object Object]" para objetos não serializados no armazenamento na web.

// Armazena o objeto myBio dentro do objeto de armazenamento de sessão do navegador:
sessionStorage.setItem("myBio", { name: "Oluwatobi" });

// Registra o objeto de armazenamento de sessão no console:
console.log(sessionStorage);

// A chamada acima retornará:
{myBio: "[object Object]", length: 1}

Como pode ser visto, o computador armazenou o objeto como "[object Object]" porque não o serializamos

Como armazenar objetos serializados no armazenamento na web

// Armazena o objeto myBio dentro do objeto de armazenamento de sessão do navegador:
sessionStorage.setItem("myBio", JSON.stringify({ name: "Oluwatobi" }));

// Registra o objeto de armazenamento de sessão no console:
console.log(sessionStorage);

// A chamada acima retornará:
{myBio: '{"name":"Oluwatobi"}', length: 1}

Utilizamos JSON.stringify() para converter o objeto em formato JSON antes de armazená-lo no armazenamento na web. Isso resulta em uma representação serializada do objeto no formato de string JSON. Ao fazer isso, você evita que o objeto seja armazenado como "[object Object]", e a recuperação do objeto pode ser feita usando JSON.parse() para converter a string JSON de volta em um objeto.

O que é o método key() do armazenamento na web?

O método key() recupera o nome (chave) de um item especificado no armazenamento na web.

Sintaxe do método key()

O método key() aceita um argumento obrigatório. Aqui está a sintaxe:

webStorageObject.key(index);

webStorageObject representa o objeto de armazenamento (localStorage ou sessionStorage) cuja chave você deseja obter.

index é um argumento obrigatório. É um número inteiro que especifica o índice do item cuja chave você deseja obter.

Como obter o nome de um item no objeto de armazenamento de sessão

Chame o método key() do sessionStorage. Forneça o índice do item cujo nome você deseja obter.

// Armazena carColor: "Rosa" dentro do objeto de armazenamento de sessão do navegador:
sessionStorage.setItem("carColor", "Rosa");

// Armazena pcColor: "Amarelo" dentro do objeto de armazenamento de sessão:
sessionStorage.setItem("pcColor", "Amarelo");

// Armazena laptopColor: "Branco" dentro do objeto de armazenamento de sessão:
sessionStorage.setItem("laptopColor", "Branco");

// Obtém o nome do item no índice 1:
sessionStorage.key(1);

Importante: O agente do usuário (user-agent) define a ordem dos itens no armazenamento de sessão. Em outras palavras, a saída do key() pode variar com base em como o agente do usuário ordena os itens do armazenamento na web. Portanto, não é recomendável confiar no key() para retornar um valor constante.

Como obter o nome de um item no objeto de armazenamento local

Chame o método key() do localStorage. Forneça o índice do item cujo nome você deseja obter.

// Armazena carColor: "Rosa" dentro do objeto de armazenamento local do navegador:
localStorage.setItem("carColor", "Rosa");

// Armazena pcColor: "Amarelo" dentro do objeto de armazenamento local:
localStorage.setItem("pcColor", "Amarelo");

// Armazena laptopColor: "Branco" dentro do objeto de armazenamento local:
localStorage.setItem("laptopColor", "Branco");

// Obtém o nome do item no índice 1:
localStorage.key(1);

Importante: O agente do usuário (user-agent) define a ordem dos itens no armazenamento local. Em outras palavras, a saída do key() pode variar com base em como o agente do usuário ordena os itens do armazenamento na web. Portanto, não é recomendável confiar no key() para retornar um valor constante.

O que é o método getItem() do armazenamento na web?

O método getItem() recupera o valor de um item especificado no armazenamento na web.

Sintaxe do método getItem()

O método getItem() aceita um argumento obrigatório. Aqui está a sintaxe:

webStorageObject.getItem(key);

webStorageObject representa o objeto de armazenamento (localStorage ou sessionStorage) cujo item você deseja obter.

key é um argumento obrigatório. É uma string que especifica o nome da propriedade de armazenamento na web cujo valor você deseja obter.

Como obter dados do objeto de armazenamento de sessão

Chame o método getItem() do sessionStorage. Forneça o nome dos dados que você deseja obter.

// Armazena a cor "Rosa" dentro do objeto de armazenamento de sessão do navegador:
sessionStorage.setItem("color", "Rosa");

// Obtém o valor da cor do armazenamento de sessão:
sessionStorage.getItem("color");

// A chamada acima retornará:
"Rosa"

Neste exemplo, o método getItem() do sessionStorage é utilizado para obter o valor associado à chave "color" no armazenamento de sessão, que é "Rosa".

Como obter dados do objeto de armazenamento local

Chame o método getItem() do localStorage. Forneça o nome dos dados que você deseja obter.

// Armazena a cor "Rosa" dentro do objeto de armazenamento local do navegador:
localStorage.setItem("color", "Rosa");

// Obtém o valor da cor do armazenamento local:
localStorage.getItem("color");

// A chamada acima retornará:
"Rosa"

Neste exemplo, o método getItem() do localStorage é utilizado para obter o valor associado à chave "color" no armazenamento local, que é "Rosa".

Observação: O método getItem() retornará null se o argumento fornecido não existir no armazenamento na web especificado.

O que é a propriedade length do armazenamento na web?

A propriedade length retorna o número de propriedades no armazenamento na web especificado.

Sintaxe da propriedade length

Aqui está a sintaxe do length:

webStorageObject.length;

webStorageObject representa o objeto de armazenamento (localStorage ou sessionStorage) cujo comprimento você deseja verificar.

Como verificar o número de itens no objeto de armazenamento de sessão

Chame a propriedade length do sessionStorage.

// Armazena carColor: "Rosa" dentro do objeto de armazenamento de sessão do navegador:
sessionStorage.setItem("carColor", "Rosa");

// Armazena pcColor: "Amarelo" dentro do objeto de armazenamento de sessão:
sessionStorage.setItem("pcColor", "Amarelo");

// Armazena laptopColor: "Branco" dentro do objeto de armazenamento de sessão:
sessionStorage.setItem("laptopColor", "Branco");

// Verifica o número de itens no armazenamento de sessão:
sessionStorage.length;

// A chamada acima pode retornar:
3

Observação: Sua chamada para sessionStorage.length pode retornar um valor maior que 3 se o armazenamento de sessão do seu navegador já contiver algumas informações armazenadas.

Como verificar o número de itens no objeto de armazenamento local

Chame a propriedade length do localStorage.

// Armazena carColor: "Rosa" dentro do objeto de armazenamento local do navegador:
localStorage.setItem("carColor", "Rosa");

// Armazena pcColor: "Amarelo" dentro do objeto de armazenamento local:
localStorage.setItem("pcColor", "Amarelo");

// Armazena laptopColor: "Branco" dentro do objeto de armazenamento local:
localStorage.setItem("laptopColor", "Branco");

// Verifica o número de itens no armazenamento local:
localStorage.length;

// A chamada acima pode retornar:
3

Observação: Sua chamada para localStorage.length pode retornar um valor maior que 3 se o armazenamento local do seu navegador já contiver algumas informações armazenadas.

O que é o método removeItem() do armazenamento na web?

O método removeItem() remove uma propriedade do armazenamento na web especificado.

Sintaxe do método removeItem()

O método removeItem() aceita um argumento obrigatório. Aqui está a sintaxe:

webStorageObject.removeItem(key);

webStorageObject representa o objeto de armazenamento (localStorage ou sessionStorage) cujo item você deseja remover.

key é um argumento obrigatório. É uma string que especifica o nome da propriedade de armazenamento na web que você deseja remover.

Como remover dados do objeto de armazenamento local

Chame o método removeItem() do localStorage. Forneça o nome dos dados que você deseja remover.

// Armazena carColor: "Rosa" dentro do objeto de armazenamento local do navegador:
localStorage.setItem("carColor", "Rosa");

// Armazena pcColor: "Amarelo" dentro do objeto de armazenamento local:
localStorage.setItem("pcColor", "Amarelo");

// Armazena laptopColor: "Branco" dentro do objeto de armazenamento local:
localStorage.setItem("laptopColor", "Branco");

// Remove o item pcColor do armazenamento local:
localStorage.removeItem("pcColor");

// Confirma se o item pcColor ainda existe no armazenamento local:
localStorage.getItem("pcColor");

// A chamada acima retornará:
null

Observação: O método removeItem() não fará nada se o argumento fornecido não existir no armazenamento local.

O que é o método clear() do armazenamento na web?

O método clear() limpa (deleta) todos os itens no armazenamento na web especificado.

Sintaxe do método clear()

O método clear() não aceita argumentos. Aqui está a sintaxe:

webStorageObject.clear();

webStorageObject representa o objeto de armazenamento (localStorage ou sessionStorage) cujos itens você deseja limpar.

Como limpar todos os itens do objeto de armazenamento de sessão

Chame o método clear() do sessionStorage.

// Armazena carColor: "Rosa" dentro do objeto de armazenamento de sessão do navegador:
sessionStorage.setItem("carColor", "Rosa");

// Armazena pcColor: "Amarelo" dentro do objeto de armazenamento de sessão:
sessionStorage.setItem("pcColor", "Amarelo");

// Armazena laptopColor: "Branco" dentro do objeto de armazenamento de sessão:
sessionStorage.setItem("laptopColor", "Branco");

// Limpa todos os itens do armazenamento de sessão:
sessionStorage.clear();

// Confirma se o armazenamento de sessão ainda contém algum item:
console.log(sessionStorage);

// A chamada acima retornará:
{length: 0}

Neste exemplo, o método clear() do sessionStorage é utilizado para remover todos os itens do armazenamento de sessão. O console.log() é usado para exibir o objeto de armazenamento de sessão no console, mostrando que não há mais itens no armazenamento após a limpeza.

Como limpar todos os itens do objeto de armazenamento local

Chame o método clear() do localStorage.

// Armazena carColor: "Rosa" dentro do objeto de armazenamento local do navegador:
localStorage.setItem("carColor", "Rosa");

// Armazena pcColor: "Amarelo" dentro do objeto de armazenamento local:
localStorage.setItem("pcColor", "Amarelo");

// Armazena laptopColor: "Branco" dentro do objeto de armazenamento local:
localStorage.setItem("laptopColor", "Branco");

// Limpa todos os itens do armazenamento local:
localStorage.clear();

// Confirma se o armazenamento local ainda contém algum item:
console.log(localStorage);

// A chamada acima retornará:
{length: 0}

Neste exemplo, o método clear() do localStorage é utilizado para remover todos os itens do armazenamento local. O console.log() é usado para exibir o objeto de armazenamento local no console, mostrando que não há mais itens no armazenamento após a limpeza.

Sugestão de Cursos

Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.

Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.

As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.

Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.

Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.

O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.

Saiba mais sobre o curso de Node.js, React e React Native.