LocalStorage e JSON

Armazenamento Local JavaScript Explicado!

Nos primórdios da internet, era necessário um servidor para armazenar dados. Mas hoje em dia, por meio do LocalStorage, é possível armazenar dados em navegadores e aplicações sem a necessidade de comunicação com um servidor de back-end.

Neste artigo, você aprenderá sobre as aplicações teóricas e práticas do LocalStorage em JavaScript.

Vamos falar sobre armazenamento na web

Antes de entrarmos no assunto principal, vamos olhar a definição de armazenamento na web. O armazenamento na web é uma das ótimas funcionalidades do HTML5 que permite que aplicações web armazenem dados localmente dentro do navegador de um usuário.

As duas formas mais comuns de armazenamento na web são o LocalStorage e o Session Storage. A principal diferença entre essas duas formas de armazenamento na web é que os dados salvos no LocalStorage nunca saem do navegador e permanecem lá até que você os remova explicitamente. Em contraste, os dados armazenados no Session Storage são removidos uma vez que uma aba/janela do navegador é fechada.

O que é Local Storage?

Como mencionado anteriormente, o LocalStorage é uma forma de armazenamento na web fornecida pelo navegador que permite que aplicações web armazenem dados localmente dentro do navegador de um usuário sem data de expiração. Aqui, os dados armazenados permanecerão disponíveis mesmo quando você fechar uma aba/janela do navegador.

Note que os dados armazenados no LocalStorage são preservados apenas no navegador de um usuário no dispositivo que ele usou para acessar um site. Portanto, os usuários não podem acessar os dados armazenados se revisitarem o mesmo site mais tarde com um navegador diferente ou em outro dispositivo.

Casos de Uso do LocalStorage

A seguir, apresentamos alguns casos de uso comuns do LocalStorage.

Armazenar Dados de Formulários Submetidos Parcialmente Se um usuário preencher um formulário longo online, o LocalStorage pode ser um recurso útil para armazenar as entradas do usuário. Nesse caso, mesmo se a internet for desconectada entre o preenchimento do formulário e a sua submissão, os usuários não perderão suas entradas e poderão continuar de onde pararam.
Caching Caching refere-se a armazenar dados, como detalhes de login, no dispositivo de um usuário para que futuras solicitações desses dados possam ser atendidas mais rapidamente. Você pode usar o LocalStorage para fazer cache de um site inteiro, de modo que os usuários ainda possam ter acesso ao site mesmo quando estiverem offline.
Banco de Dados para Aplicações Básicas Como mencionado anteriormente, o armazenamento de dados inicialmente só era possível comunicando-se com um banco de dados através do backend. Mas agora, com o LocalStorage, você pode armazenar dados no frontend sem a necessidade de um banco de dados. Portanto, o LocalStorage pode, às vezes, servir como um "pequeno" banco de dados para aplicações básicas.

Como Acessar o LocalStorage

Acessar o LocalStorage é bastante simples e leva apenas alguns passos:

Vá a qualquer site ou aplicação web e abra o console do navegador pressionando F12 no teclado.

Em seguida, clique na aba Aplicação, e no menu à esquerda, você verá o LocalStorage sob a aba Armazenamento, conforme mostrado abaixo.

Como Usar o Local Storage

Você pode usar os seguintes métodos para gerenciar dados no LocalStorage.

setItem() Para armazenar dados no LocalStorage.
Exemplo:
localStorage.setItem("nome", "Mandy");
Aqui, nome é a chave e Mandy é o valor. Os dados no LocalStorage são armazenados como strings. Para salvar objetos e arrays, você deve convertê-los para strings usando o método JSON.stringify().
getItem()
Para obter ou recuperar os dados do LocalStorage.
Exemplo:
localStorage.getItem("informacao-do-usuario");
Isso retornará uma string JSON que você deve converter para um objeto usando o método JSON.parse().
removeItem()
Para remover dados do LocalStorage usando uma chave.
Exemplo:
localStorage.removeItem("informacao-do-usuario");
key()
Para recuperar dados do LocalStorage em um índice especificado.
Exemplo:
(localStorage.key(2);
clear()
Para remover todos os dados do LocalStorage de uma vez.
localStorage.clear();

Fonte: https://dev.to/dboatengx/javascript-local-storage-explained-1di6

JSON

JavaScript Object Notation (JSON)

JavaScript Object Notation (JSON) é um formato leve baseado em texto para armazenar dados estruturados que podem ser montados, analisados e gerados por JavaScript e outras linguagens de programação da família C (C, C++, C#, Java, JavaScript, Perl, Python).

Usos do JSON

JavaScript Object Notation (JSON) é usado para a troca de dados de forma intercambiável entre múltiplos ou diferentes sistemas, como transferir dados de um servidor backend para o frontend de uma aplicação ou vice-versa.

Os dados em JSON são armazenados entre chaves {}, como pares de chave e valor, envoltos em aspas duplas "" e separados por dois pontos :, enquanto uma vírgula , é usada para indicar o fim de um par chave e valor específico. Isso facilita a leitura e escrita por humanos.

Como Criar um Arquivo JSON

Para criar um arquivo JSON, crie um arquivo e dê a ele qualquer nome de sua escolha e depois salve-o com uma extensão de arquivo JSON (.json).

Depois de ter criado o arquivo, comece a criar os dados do objeto que você deseja diretamente no seu arquivo JSON.

{ 
    "firstName": "John", 
    "LastName": "Plum",
    "occupation": "web Developer",
    "Hobbies": ["Reading", "Coding", "Basket Ball", "Football", "Movies", "Music"],
    "married": true,
    "Age": 29
}

Do exemplo de código acima, o arquivo JSON é usado para armazenar as informações de uma pessoa com um primeiro nome de John, juntamente com seu sobrenome e outras informações.

O JSON pode assumir qualquer tipo de dado válido em JavaScript como um par de valores, incluindo:

String
Number
Boolean (true ou false)
Null
Array
Object
Infinity
NaN

No entanto, é importante notar que também podemos criar arquivos JSON em uma sintaxe de objeto de array. Por exemplo:

[
    { 
        "firstName": "John", 
        "LastName": "Plum",
        "occupation": "web Developer",
        "Hobbies": ["Reading", "Coding", "Basket Ball", "Football", "Movies", "Music"],
        "married": true,
        "Age": 29
    }
]

Aqui, colchetes são usados como ponto de partida.

Métodos Estáticos

Dependendo do ambiente em que você está trabalhando, às vezes será necessário analisar o arquivo JSON para funcionar em um novo ambiente.

Analisar, neste contexto, significa convertê-lo de um objeto para uma string ou de uma string para um objeto.

Existem dois métodos estáticos disponíveis em JSON para fazer isso, que são:

JSON.stringify()
JSON.parse()

JSON.stringify()

O método estático JSON.stringify() é usado para converter o objeto JSON em uma string. Isso é usado em um ambiente JavaScript.

Para ver como isso funciona, copie o código JSON abaixo e cole-o em um arquivo JavaScript e então armazene-o em uma variável chamada person.

let person = { 
    "firstName": "John", 
    "LastName": "Plum",
    "occupation": "web Developer",
    "Hobbies": ["Reading", "Coding", "Basket Ball", "Football", "Movies", "Music"],
    "married": true,
    "Age": 29
}

O código acima é um objeto JavaScript válido e podemos acessar as propriedades (chaves e valores) como um Objeto.

JSON.parse()

O JSON.parse() faz o oposto do JSON.stringify(). Simplesmente converte a string JSON em um Objeto.

let person = JSON.stringify(person);

const newPerson2 = JSON.parse(person);

console.log(newPerson2);

Aqui, o método JSON.parse() é usado para converter o newPerson de volta para um Objeto.

Fontes:

https://dev.to/alexanie_/what-is-json-30e7

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON