Resumo : neste tutorial, você aprenderá sobre o Storage
tipo e como usar o JavaScript localStorage
para armazenar dados persistentes.
Introdução ao Storage
tipo
O Storage
tipo foi projetado para armazenar pares nome-valor. O Storage
tipo é an Object
com os seguintes métodos adicionais:
setItem(name, value)
– definir o valor para um nomeremoveItem(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 Storage
objeto, você pode usar a length
propriedade.
O Storage
objeto 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 Storage
objeto, você sempre obterá os dados da string.
O objeto JavaScript localStorage
A especificação HTML5 apresenta o localStorage
como 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 localStorage
estão vinculados a uma origem. Isso significa que the localStorage
é único por protocol://host:port
.
armazenamento local x cookies
Primeiro, os dados armazenados no localStorage
nã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 localStorage
podem 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 localStorage
através da propriedade do window
objeto:
window.localStorage
Linguagem de código: JavaScript ( javascript )
Como the localStorage
é uma instância do Storage
tipo, você pode invocar os métodos do Storage
tipo para gerenciar dados.
Ao digitar o seguinte código no Console:
window.localStorage
Linguagem 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 length
propriedade assim:
console.log(window.localStorage.length); // 1
Linguagem de código: JavaScript ( javascript )
Como o window
objeto é global , você não precisa especificá-lo explicitamente. Por exemplo:
console.log(localStorage.length); // 1
Linguagem 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 theme
chave:
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...of
loop:
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: white
Linguagem de código: HTTP ( http )
Armazenando objetos
O Storage
tipo 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 localStorage
e 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 Storage
objeto, o storage
evento é acionado no documento.
O storage
evento 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 storage
evento 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 ounull
se a chave foi removida.oldValue
– o valor antes da chave ser definida ou removida.
Para escutar o storage
evento, você usa o addEventListener()
método do window
objeto 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
Storage
tipo fornece métodos para armazenar e gerenciar dados em navegadores da web. - O
localStorage
é uma instância doStorage
tipo que permite armazenar dados persistentes nos navegadores da web. - O
localStorage
pode armazenar apenas strings. Para armazenar objetos, você os converte em strings usando oJSON.stringify()
método. E você converte as strings em objetos ao recuperá-las usandolocalStorage
oJSON.parse()
método.