Executando verificação de segurança...
27
DomingosRodrigues
2 min de leitura ·

Você conhece as diferenças entre os tipos de armazenamento do navegador?

Os navegadores web oferecem vários mecanismos de armazenamento para desenvolvedores, cada um com finalidades e características distintas. Aqui estão alguns dos principais tipos de armazenamento no navegador:

localStorage:

Tipo: Armazenamento de chave-valor.
Capacidade: Geralmente, em torno de 5 a 10 MB por domínio.
Persistência: Permanece após o fechamento do navegador.
Uso Comum: Armazenamento de dados locais para a aplicação, como configurações do usuário, preferências e dados pequenos.

sessionStorage:

Tipo: Semelhante ao localStorage, é um armazenamento de chave-valor.
Capacidade: Semelhante ao localStorage, mas é limitado ao ciclo de vida da sessão do navegador.
Persistência: Os dados são removidos quando a sessão do navegador é encerrada (quando o navegador é fechado).

Cookies:

Tipo: Texto pequeno armazenado como pares de chave-valor.
Capacidade: Limitado a cerca de 4 KB por cookie e 20 cookies por domínio.
Persistência: Pode ser configurado para expirar após um tempo específico ou permanecer após o fechamento do navegador.
Uso Comum: Armazenamento de dados temporários, como preferências do usuário e informações de sessão.

IndexedDB:

Tipo: Banco de dados NoSQL orientado a objetos.
Capacidade: Varia de navegador para navegador, geralmente maior que localStorage.
Persistência: Permanece após o fechamento do navegador.
Uso Comum: Armazenamento de grandes volumes de dados estruturados, como dados offline para aplicativos da web.

Web SQL Database (Obsoleto):

Tipo: Banco de dados relacional baseado em SQL.
Capacidade: Geralmente maior que localStorage.
Persistência: Permanece após o fechamento do navegador.
Nota: Embora tenha sido uma especificação, o Web SQL Database foi marcado como obsoleto e não é mais amplamente suportado. IndexedDB é uma alternativa mais moderna.

Cache:

Tipo: Cache de recursos da web, como arquivos CSS, JavaScript e imagens.
Capacidade: Variável, dependendo do navegador.
Persistência: Pode ser configurado para persistir, mesmo após o fechamento do navegador.
Uso Comum: Armazenamento de recursos para fornecer uma experiência offline e melhorar o desempenho da aplicação.

A escolha entre esses mecanismos de armazenamento depende dos requisitos específicos da aplicação, como tamanho dos dados, persistência necessária, ciclo de vida dos dados e complexidade da estrutura de dados. Cada tipo de armazenamento tem seus pontos fortes e limitações, e é importante escolher aquele que melhor se adequa aos requisitos da sua aplicação.

Carregando publicação patrocinada...
3
ThomasAlmeida

Usei muito LocalStorage e IndexDB pra entender como um banco funciona e depois iniciar os estudos em backend, acho uma ótima alternativa para persistir dados em projetos de estudo, acredito que todo dev frontend que passa a usar esses tipos de dados deva ver isso e testar como uma forma inicial de entender na prática como um backend estrutura as coisas, enfim meus 2 centavos pra contribuir kkk

2
thiagoomatheus

Assim como o ThomasAlmeida comentou, também usei algumas das alternativas antes de aprender mais sobre banco de dados.

Para quem ainda está iniciando em JS e quer ter noção de como fazer um CRUD básico, o localStorage é uma ótima opção.

Mas, aproveitando a oportunidade, vai uma dúvida aí: Quando uma preferência de usuário é salva no navegador (cliente), por exemplo, o tema, quando a aplicação é iniciada no servidor ela virá com o tema padrão, só depois ele vai puxar a preferência no navegador e atualizar. Qual seria uma forma viável de a tela não "piscar" com o tema padrão (servidor), para só depois ir para o tema do usuário (cliente)?

Perdoe-me se houver alguma ignorância na pergunta.

1
DomingosRodrigues
Autor
Autor

Olá, Thiago! Acredito que uma forma de resolver isso é trazer a página do servidor já renderizada com o tema escolhido pelo usuário. Para isso, antes de trazer a página renderizada será necessário checar se há alguma escolha de tema no localStorage. Se houver, a página será renderizada e servida já no tema escolhido.

1
thiagoomatheus

Mas, uma dúvida... o armazenamento no navegador faz parte do lado do cliente.

Se faz parte do cliente, ao checar no servidor se há algo no localStorage, a resposta sempre será nula, afinal, no servidor o localStorage não existe. Seria isso mesmo?

2
TiagoVel

A pergunta não foi para mim mas acho que posso responder rs

Assim como você afirmou, no servidor não existe localStorage e mesmo se existisse concerteza não seria o mesmo do que o localStorage do frontEnd

Para isso existe os cookies, os cookies podem ser acessador pelo servidor, já que os mesmos são enviados na requisição https. Exemplo em PHP:

if(isset($_COOKIE["theme"])){
    $value = $_COOKIE["theme"];
}else{
    echo "Invalid theme";
}

Exemplo em nodeJS:

const express = require("express");
const cookieParser = require("cookie-parser");

const app = express();
app.use(cookieParser());

var value;

app.get("/",(req,res) => {
    if(req.cookies["theme"]){
        value = req.cookies["theme"];
    }else{
        console.log("Invalid theme");
    }
    
    //res.send(...)
});

//Iniciar servidor...
```
2
1
DomingosRodrigues
Autor
Autor

Nao vi sua segunda dúvida a tempo. Mas é isso aí que o TiagoVel disse. Além, disso, é, alguns framework existem bibliotecas para integrar o armazenamento do navegador ao servidor. Para o NextJs há a lib Nookies, por exemplo.

2
1
1
kayqueprogram

Pelo que eu entendi, eu posso escolher qualquer um desses, pra armazenar todo o tipo de dado, eu só preciso escolher o que mais se adequa a minha necessidade