O mecanismo localStorage fornece um tipo de objeto de armazenamento da Web que permite armazenar e recuperar dados no navegador. Você pode armazenar e acessar dados sem expiração; os dados estarão disponíveis mesmo depois que um visitante fechar seu site.

Você normalmente acessará localStorage usando JavaScript. Com uma pequena quantidade de código, você pode construir um projeto de amostra, como um contador de pontuação. Isso mostrará como você pode armazenar e acessar dados persistentes usando apenas código do lado do cliente.

O que é localStorage em JavaScript?

O objeto localStorage faz parte da API de armazenamento da web que a maioria dos navegadores da web suporta. Você pode armazenar dados como pares de valores-chave usando localStorage. As chaves e valores exclusivos devem estar no formato UTF-16 DOM String.

Se você quiser armazenar objetos ou arrays, você terá que convertê-los em strings usando o JSON.stringify() método. Você pode armazenar até 5 MB de dados em localStorage. Além disso, todas as janelas com a mesma origem podem compartilhar os dados localStorage desse site.

instagram viewer

Um navegador não excluirá esses dados mesmo quando um usuário os fechar. Ele estará disponível para o site que o criou durante qualquer sessão futura. No entanto, você não deve usar localStorage para dados confidenciais, pois outros scripts em execução na mesma página podem acessá-los.

localStorage vs. sessãoArmazenamento

o localStorage e sessionStorage os objetos fazem parte da API do Web Storage que armazena pares de valores-chave localmente. Todos os navegadores modernos suportam ambos. Com localStorage, os dados não expiram mesmo depois que o usuário fecha o navegador. Isso difere do sessionStorage, que limpa os dados quando a sessão da página termina. Uma sessão de página termina quando você fecha uma guia ou janela.

O código usado neste projeto está disponível em um Repositório do GitHub e é gratuito para você usar sob a licença do MIT. Se você quiser dar uma olhada em uma versão ao vivo do projeto do contador de pontuação, você pode conferir o live demonstração.

Como o localStorage funciona?

Você pode acessar a funcionalidade localStorage através do Window.localStorage propriedade. Esta propriedade fornece vários métodos como setItem(), getItem() e removeItem(). Você pode usá-los para armazenar, ler e excluir pares de chave/valor.

Como armazenar dados no localStorage

Você pode armazenar dados em localStorage usando o setItem() método. Este método aceita dois argumentos, a chave e o valor correspondente.

window.localStorage.setItem('Pitão', 'Guido van Rossum');

Aqui, Pitão é a chave e Guido van Rossum é o valor. Se você quiser armazenar um array ou um objeto, terá que convertê-lo em uma string. Você pode converter um array ou um objeto em uma string usando o JSON.stringify() método.

janela.localStorage.setItem('Python', 'Guido por Rossum');
const aluno = {
 nome: "Yuvraj",
 marcas: 85,
 assunto: "Aprendizado de Máquina"
}
const pontuações = [76, 77, 34, 67, 88];
janela.localStorage.setItem('resultado', JSON.stringify (aluno));
janela.localStorage.setItem('marcas', JSON.stringify (pontuações));

Como ler dados do localStorage

Você pode ler dados de localStorage usando o getItem() método. Este método aceita a chave como parâmetro e retorna o valor como uma string.

deixar dados1 = janela.localStorage.getItem('Python');
deixar dados2 = janela.localStorage.getItem('resultado');
console.log (dados1);
console.log (dados2);

Isso produz a seguinte saída:

Guido van Rossum
{"nome":"Yuvraj","marcas":85,"sujeito":"Aprendizado de máquina"}

Se você quiser converter o resultado de uma string para um objeto, você deve usar o JSON.parse() método.

deixar dados2 = JSON.parse(janela.localStorage.getItem('resultado'));
console.log (dados2);

Como excluir sessões de armazenamento local

Você pode excluir sessões localStorage usando o remover item() método. Você precisa passar a chave como parâmetro para este método para excluir o par chave-valor. Se a chave existir, o método excluirá o par chave-valor e, se a chave não existir, o método não fará nada.

window.localStorage.removeItem('Pitão');
window.localStorage.removeItem('C++');

Como limpar todos os itens no localStorage

Você pode limpar todos os itens no armazenamento local usando o Claro() método. Você não precisa passar nenhum parâmetro para este método.

janela.localStorage.Claro();

Como encontrar o comprimento de localStorage

Você pode encontrar o comprimento de localStorage usando o localStorage.length propriedade.

deixar len = localStorage.length;
console.log (len);

Como obter a chave em uma determinada posição

Você pode obter a chave em uma determinada posição usando o chave() método. Este método aceita o índice como parâmetro.

deixar d = localStorage.key(1);
console.log (d);

O método key() é usado principalmente para percorrer todos os itens em localStorage.

Como percorrer todos os itens em localStorage

Você pode iterar sobre todos os itens em localStorage usando um loop for.

por (deixar eu = 0; i < localStorage.length; i++){
deixar chave = localStorage.key (i);
deixar valor = localStorage.getItem (chave);
console.log (chave, valor);
}

O método key() aceita o índice como argumento e retorna a chave correspondente. O método getItem() aceita a chave como argumento e retorna o valor correspondente. Por último, o console.log() O método imprime o par chave-valor.

Projeto JavaScript simples baseado em localStorage

Com uma compreensão de seus métodos básicos, você pode desenvolver um projeto JavaScript simples baseado em localStorage. Neste projeto, você criará um aplicativo de contagem de pontuação que aumentará e diminuirá a contagem de pontuação de acordo com o clique de um botão. Além disso, você implementará a funcionalidade para limpar todos os itens em localStorage.

Criar um index.html e script.js arquivo em uma nova pasta e abra os arquivos em seu editor de código favorito. Use o seguinte código HTML para criar uma interface para o aplicativo contador de pontuação:

<!DOCTYPE html>
<html>
<corpo>
<h1>localStorage em JavaScript</h1>
<botão ao clicar="aumentarContador()" tipo="botão">Aumentar a pontuação</button>
<botão ao clicar="diminuirContador()" tipo="botão">Diminuir pontuação</button>
<botão ao clicar="clearCounter()" tipo="botão">Limpar armazenamento local</button>
<p>Pontuação:</p>
<p id="pontuação"></p>
<p>Clique no "Aumentar a pontuação" botão para aumentar a contagem de pontuação</p>
<p>Clique no "Diminuir pontuação" botão para diminuir a contagem de pontuação</p>
<p>Clique no "Limpar armazenamento local" botão para limpar o localStorage</p>
<p>
 Você pode fechar a guia do navegador (ou janela), e tentar novamente.
 Você verá que os dados ainda persistem eénão perdido mesmo após o fechamento
 o navegador.
</p>
<script src="script.js"></script>
</body>
</html>

Esta página contém três botões: Aumentar a pontuação, Diminuir pontuação, e Limpar armazenamento local. Esses botões chamam o aumentarContador(), diminuirContador(), e clearCounter() funções respectivamente. Use o código a seguir para adicionar funcionalidade ao aplicativo de contador de pontuação usando JavaScript.

funçãoaumentarContador() {
var contagem = Número(janela.localStorage.getItem("contagem"));
 contagem += 1;
 window.localStorage.setItem("contar", contar);
 document.getElementById("pontuação").innerHTML = contagem;
}

o aumentarContador() A função recupera a contagem usando o método getItem(). Ele converte o resultado em um Number, pois getItem() retorna uma string e a armazena na variável count.

A primeira vez que você clicar no Aumentar a pontuação O botão estará antes de qualquer chamada para setItem(). Seu navegador não encontrará o contar key em localStorage, então ele retornará um valor nulo. Como a função Number() retorna 0 para uma entrada nula, ela não precisa de nenhum tratamento de caso especial. O código pode aumentar com segurança o valor da contagem antes de armazená-lo e atualizar o documento para exibir o novo valor.

funçãodiminuirContador() {
var contagem = Número(janela.localStorage.getItem("contagem"));
 contagem -= 1;
 window.localStorage.setItem("contar", contar);
 document.getElementById("pontuação").innerHTML = contagem;
}

o diminuirContador() função recupera e verifica os dados como aumentarContador() faz. Ele diminui o contar variável por 1, cujo padrão é 0.

funçãoclearCounter() {
janela.localStorage.Claro();
 document.getElementById("pontuação").innerHTML = "";
}

Por último, o clearCounter() A função exclui todos os dados do localStorage usando o Claro() método.

Faça mais com localStorage

O objeto localStorage tem vários métodos, incluindo setItem(), getItem(), removeItem() e clear(). Embora o localStorage seja fácil de usar, não é seguro armazenar informações confidenciais. Mas é uma boa opção desenvolver projetos que não exijam muito armazenamento e não envolvam informações confidenciais.

Quer construir outro projeto JavaScript baseado em localStorage? Aqui está um aplicativo básico de lista de tarefas que você pode desenvolver usando HTML, CSS e JavaScript.