Armazenamento local JavaScript

Resumo : neste tutorial, você aprenderá sobre o Storagetipo e como usar o JavaScript localStoragepara armazenar dados persistentes.

Introdução ao Storagetipo

O Storagetipo foi projetado para armazenar pares nome-valor. O Storagetipo é an Objectcom os seguintes métodos adicionais:

• setItem(name, value)– definir o valor para um nome
• removeItem(name)– remova o par nome-valor identificado pelo nome.
• getItem(name)– obtenha o valor para um determinado nome.
• key(index)– obtenha o nome do valor na posição numérica fornecida.
• clear()– remova todos os valores.

Para obter o número de pares nome-valor em um Storageobjeto, você pode usar a lengthpropriedade.

O Storageobjeto pode armazenar apenas strings. Ele converterá automaticamente dados que não sejam de string em uma string antes de armazená-los.

Ao recuperar dados de um Storageobjeto, você sempre obterá os dados da string.

O objeto JavaScript localStorage

A especificação HTML5 apresenta o localStoragecomo uma forma de armazenar dados sem data de validade em navegadores da web.

Em outras palavras, os dados armazenados nos navegadores persistirão mesmo depois de você fechar as janelas do navegador.

Os dados armazenados no localStorageestão vinculados a uma origem. Isso significa que the localStorageé único por protocol://host:port.

armazenamento local x cookies

Primeiro, os dados armazenados no localStoragenão são enviados ao servidor em todas as solicitações, como os cookies . Por esse motivo, você pode armazenar mais dados no arquivo localStorage.

A maioria dos navegadores modernos permite armazenar até 5 MB de dados no arquivo localStorage. Observe que você pode armazenar até 4 KB em cookies.

Em segundo lugar, os dados armazenados no localStoragepodem ser gerenciados pelo cliente, especificamente JavaScript no navegador da web. Não pode ser acessível pelos servidores.

No entanto, os cookies podem ser geridos tanto por JavaScript em navegadores como em servidores.

Acessando o localStorage

Você pode acessar localStorageatravés da propriedade do windowobjeto:

window.localStorageLinguagem de código:  JavaScript  ( javascript )

Como the localStorageé uma instância do Storagetipo, você pode invocar os métodos do Storagetipo para gerenciar dados.

Ao digitar o seguinte código no Console:

window.localStorageLinguagem de código:  JavaScript  ( javascript )

… você verá o seguinte objeto:

Storage {length: 0}Linguagem de código:  CSS  ( css )

1) O método setItem()

O seguinte usa o setItem()método para armazenar um par nome-valor no localStorage:

window.localStorage.setItem('theme','dark');Linguagem de código:  JavaScript  ( javascript )

2) A propriedade do comprimento

Para obter o número de pares nome-valor, você usa a lengthpropriedade assim:

console.log(window.localStorage.length); // 1Linguagem de código:  JavaScript  ( javascript )

Como o windowobjeto é global , você não precisa especificá-lo explicitamente. Por exemplo:

console.log(localStorage.length); // 1Linguagem de código:  JavaScript  ( javascript )

3) O método getItem()

Para obter o valor por uma chave, você usa o getItem()método. O exemplo a seguir usa o getItem()método para obter o valor da themechave:

localStorage.getItem('theme'); // 'dark'Linguagem de código:  JavaScript  ( javascript )

4) O método removeItem()

Para remover um par nome-valor por uma chave, você usa o removeItem()método. Por exemplo:

localStorage.removeItem('theme');Linguagem de código:  JavaScript  ( javascript )

5) Faça um loop nas chaves do objeto localStorage

O seguinte armazena três pares nome-valor em localStorage:

localStorage.setItem('theme','light');
localStorage.setItem('backgroundColor','white');
localStorage.setItem('color','#111');Linguagem de código:  JavaScript  ( javascript )

Para iterar sobre pares nome-valor armazenados no localStorage, você usa o Object.keys()método com for...ofloop:

let keys = Object.keys(localStorage);
for(let key of keys) {
  console.log(`${key}: ${localStorage.getItem(key)}`);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

color: #111
theme: light
backgroundColor: whiteLinguagem de código:  HTTP  ( http )

Armazenando objetos

O Storagetipo armazena apenas dados de string. Para armazenar objetos, você precisa convertê-los em strings usando o JSON.stringify()método. Por exemplo:

const settings = {
    backgroundColor: '#fff',
    color: '#111',
    theme: 'light'
};

localStorage.setItem('settings', JSON.stringify(settings));

console.log(localStorage.getItem('settings'));Linguagem de código:  JavaScript  ( javascript )

Saída: (uma string)

'{"backgroundColor":"#fff","color":"#111","theme":"light"}'Linguagem de código:  JavaScript  ( javascript )

O seguinte recupera o valor de localStoragee o converte de volta no objeto usando o JSON.parse()método.

let storedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(storedSettings);Linguagem de código:  JavaScript  ( javascript )

O evento de armazenamento

Quando você faz uma alteração no Storageobjeto, o storageevento é acionado no documento.

O storageevento ocorre nos seguintes cenários:

• Armazene um par nome-valor chamando o setItem()método.
• Remova um par nome-valor chamando o removeItem()método.
• E remova todos os valores chamando o clear()método.

O storageevento tem as seguintes propriedades:

• domain– o domínio para o qual o armazenamento muda.
• key– a chave que foi definida ou removida.
• newValue– o valor para o qual a chave foi definida ou nullse a chave foi removida.
• oldValue– o valor antes da chave ser definida ou removida.

Para escutar o storageevento, você usa o addEventListener()método do windowobjeto assim:

addEventListener('storage', function(e){
   console.log(`The value of the ${e.key} changed for the ${e.domain}.`);
});Linguagem de código:  JavaScript  ( javascript )

Resumo

• O Storagetipo fornece métodos para armazenar e gerenciar dados em navegadores da web.
• O localStorageé uma instância do Storagetipo que permite armazenar dados persistentes nos navegadores da web.
• O localStoragepode armazenar apenas strings. Para armazenar objetos, você os converte em strings usando o JSON.stringify()método. E você converte as strings em objetos ao recuperá-las usando localStorageo JSON.parse()método.