Gravar dados em um arquivo em JavaScript
- Armazene dados no lado do cliente usando a API HTML 5 Web Storage
- Excluir dados de armazenamento da Web para armazenamento local
A API de armazenamento da web HTML5 nos permite armazenar dados localmente no lado do cliente. Observe que apenas uma pequena quantidade de dados pode ser armazenada localmente no lado do cliente e seu tamanho máximo deve ser menor ou igual a 5 MB.
Os dados não são encaminhados ou enviados de volta ao servidor em um determinado momento se você usar a API de armazenamento da web. Ele sempre estará disponível localmente em um arquivo.
Armazene dados no lado do cliente usando a API HTML 5 Web Storage
Geralmente, existem dois tipos de objetos de armazenamento da web HTML para armazenar dados no lado do cliente.
- Armazenamento local (
window.localStorage)
No Armazenamento Local, os dados estarão sempre disponíveis a qualquer momento, mesmo após o fechamento da janela do navegador. Este tipo não é aplicável quando o usuário visualiza a página da web no modo anônimo (navegação privada). Neste caso, os dados serão apagados logo após o fechamento da última janela privada.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
localStorage.setItem('company', 'Google');
const storedValue = localStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
Primeiro, temos um elemento div vazio com um id de company_name. Dentro desse elemento div, exibiremos o valor, que armazenaremos no armazenamento local.
Para inserir qualquer valor dentro do localStorage, temos que passar o valor na forma de par chave-valor. Você pode fazer este processo usando o método setItem, fornecido pelo armazenamento local. Neste caso, empresa é a chave e Google é o valor. O método setItem não retornará nada; ele apenas armazenará o valor dentro do armazenamento local.
Para obter o valor de volta, o armazenamento local nos fornece o método getItem() que pega a key do valor que você deseja obter como argumento. Em seguida, armazenamos os resultados na variável chamada storedValue. Neste ponto, temos o valor Google dentro de storedValue, e a única coisa que temos que fazer é exibir esse valor dentro da tag div.
Para fazer isso, primeiro temos que obter o elemento div com a ajuda de seu atributo id usando o método document.getElementById e armazenar esse elemento HTML dentro de uma nova variável chamada company_name.
Finalmente, adicionaremos o valor presente dentro da variável storedValue ao elemento div com a ajuda da propriedade innerHTML como company_name.innerHTML = storedValue.
- Armazenamento de sessão (
window.sessionStorage)
Sempre que você usar o armazenamento da sessão para armazenar os dados, os dados ficarão disponíveis até que a guia do navegador seja aberta e serão apagados quando a sessão da página terminar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="company_name"></div>
<script>
sessionStorage.setItem('company', 'Google');
const storedValue = sessionStorage.getItem('company');
let company_name = document.getElementById("company_name");
company_name.innerHTML = storedValue;
</script>
</body>
</html>
Aqui, o código é totalmente semelhante ao de Armazenamento local. A única diferença é que no lugar de localStorage, usamos sessionStorage. Em primeiro lugar, o valor Google será armazenado dentro do sessionStorage. Este valor pode ser acessado posteriormente simplesmente passando a key associada ao valor para o método getItem(). Em seguida, armazenamos esse valor dentro da variável storedValue. No final, estamos adicionando este valor a div, que exibirá o valor na tela.
Todos os navegadores modernos oferecem suporte a esses dois tipos.
Excluir dados de armazenamento da Web para armazenamento local
Como já vimos, o armazenamento da sessão exclui todos os dados assim que a guia do navegador ou todo o navegador é fechado. Mas e se você também quiser excluir os dados locais por motivos de segurança ou necessidades pessoais? Também existe uma maneira de fazer isso.
Aqui, existem dois casos:
- Se você deseja excluir um determinado valor do armazenamento local, você pode usar o método abaixo. No método
remove, temos que passar akeypara o valor que deseja apagar.localStorage.remove('key') - Se quiser limpar todo o armazenamento local, você pode fazer isso com este método.
localStorage.clear()
Ambos os métodos serão executados quando a guia do navegador ou o próprio navegador for fechado.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn