review-local-storage-and-crud
Voltar à Trilha

Revisão de Local Storage e CRUD

--- id: 6723d0ac516099c902394e8b title: Revisão de Local Storage e CRUD challengeType: 31 dashedName: review-local-storage-and-crud --- # --description--

Armazenamento Persistente

  • Definição: Armazenamento persistente refere-se a uma forma de salvar dados de modo que eles permaneçam disponíveis mesmo após a energia ser desligada ou o dispositivo ser reiniciado.

Criar, Ler, Atualizar, Deletar (CRUD)

  • Criar: Isso se refere ao processo de criar novos dados. Por exemplo, em um aplicativo web, isso pode ser quando um usuário adiciona um novo post a um blog.
  • Ler: Esta é a operação onde os dados são recuperados de um banco de dados. Por exemplo, quando você visita um post de blog ou visualiza seu perfil em um site, você está realizando uma operação de leitura para buscar e exibir os dados armazenados no banco de dados.
  • Atualizar: Isso envolve modificar dados existentes no banco de dados. Um exemplo seria editar uma postagem no blog ou atualizar as informações do seu perfil.
  • Excluir: Esta é a operação que remove dados de um banco de dados. Por exemplo, quando você exclui uma postagem de blog ou uma conta, você está realizando uma operação de exclusão.

Métodos HTTP

  • Definição: HTTP significa Hypertext Transfer Protocol e é a base para a comunicação de dados na web. Existem métodos HTTP que definem as ações que podem ser realizadas em recursos na web. Os métodos comuns são GET, POST, PUT, PATCH e DELETE.
  • Método GET: Isso é usado para buscar dados de um servidor.
  • Método POST: Isso é usado para enviar dados a um servidor que cria um novo recurso.
  • Método PUT: Isso é usado para atualizar um recurso substituindo-o completamente.
  • Método PATCH: Isso é usado para atualizar parcialmente um recurso.
  • Método DELETE: Isso é usado para remover registros de um banco de dados.

Propriedades localStorage e sessionStorage

  • Web Storage API: Esta API fornece um mecanismo para os navegadores armazenarem pares chave-valor diretamente no navegador, permitindo que os desenvolvedores armazenem informações que podem ser usadas em diferentes recarregamentos de página e sessões. Os dois principais componentes da Web Storage API são as propriedades localStorage e sessionStorage.
  • Propriedade localStorage: localStorage é a parte da Web Storage API que permite que os dados persistam mesmo depois que a janela do navegador é fechada ou a página é atualizada. Esses dados permanecem disponíveis até que sejam explicitamente removidos pela aplicação ou pelo usuário.
  • Método localStorage.setItem(): Este método é usado para armazenar um par chave-valor em localStorage.
localStorage.setItem('username', 'Jessica');
  • Método localStorage.getItem(): Este método é usado para recuperar o valor de uma chave específica do localStorage.
localStorage.setItem('username', 'codingRules');

let username = localStorage.getItem('username');
console.log(username); // codingRules
  • Método localStorage.removeItem(): Este método é usado para remover um item específico do localStorage usando sua chave.
localStorage.removeItem('username');
  • Método localStorage.clear(): Este método é usado para limpar todos os dados armazenados em localStorage.
localStorage.clear();
  • Propriedade sessionStorage: Armazena dados que duram apenas para a sessão atual e são apagados quando a aba ou janela do navegador é fechada.
  • Método sessionStorage.setItem(): Este método é usado para armazenar um par chave-valor em sessionStorage.
sessionStorage.setItem('cart', '3 items');
  • Método sessionStorage.getItem(): Este método é usado para recuperar o valor de uma chave específica do sessionStorage.
sessionStorage.setItem('cart', '3 items');

let cart = sessionStorage.getItem('cart');
console.log(cart); // '3 items'
  • Método sessionStorage.removeItem(): Este método é usado para remover um item específico do sessionStorage usando sua chave.
sessionStorage.removeItem('cart');
  • Método sessionStorage.clear(): Este método é usado para limpar todos os dados armazenados em sessionStorage.
sessionStorage.clear();

Trabalhando com Cookies

  • Definition: Cookies, also known as web cookies or browser cookies, are small pieces of data that a server sends to a user's web browser. Esses cookies são armazenados no dispositivo do usuário e enviados de volta ao servidor com as solicitações subsequentes. Cookies são essenciais para ajudar aplicações web a manter o estado e lembrar informações do usuário, o que é especialmente importante já que HTTP é um protocolo sem estado.
  • Session Cookies: These cookies only last for the duration of the user's session on the website. Uma vez que o usuário fecha o navegador ou a aba, o cookie de sessão é excluído. Esses cookies são normalmente usados para tarefas como manter um usuário logado durante a visita.
  • Cookies Seguros: Esses cookies são enviados apenas via HTTPS, garantindo que não possam ser interceptados por um invasor durante o trânsito.
  • Cookies HttpOnly: Esses cookies não podem ser acessados ou modificados pelo JavaScript executado no navegador, tornando-os mais seguros contra ataques de cross-site scripting (XSS).
  • Cabeçalho Set-Cookie: Quando você visita um site, o servidor pode enviar um cabeçalho Set-Cookie na resposta HTTP. Esse cabeçalho instrui seu navegador a salvar um cookie com informações específicas. Por exemplo, ele pode armazenar um ID único que ajuda o site a reconhecê-lo na próxima vez que você visitar.
Você pode definir manualmente um cookie em JavaScript usando document.cookie: 
document.cookie = "organization=G.E.A.R ACADEMY; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/";
Para deletar um cookie, você pode definir sua data de expiração para um momento no passado. 
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

API de Cache

  • Definição: Cachear é o processo de armazenar cópias de arquivos em um local de armazenamento temporário, para que possam ser acessados mais rapidamente. A Cache API é usada para armazenar requisições e respostas de rede, fazendo com que aplicações web funcionem de forma mais eficiente e até mesmo offline. Ela faz parte da API mais ampla do Service Worker e é crucial para criar Progressive Web Apps (PWAs) que podem funcionar em condições de rede instáveis ou lentas.
A Cache API é um mecanismo de armazenamento que guarda objetos Request e Response. Quando uma requisição é feita a um servidor, a aplicação pode armazenar a resposta e recuperá-la depois do cache em vez de fazer uma nova requisição de rede. Isso reduz o tempo de carregamento, economiza largura de banda e melhora a experiência geral do usuário.
  • Cache Storage: Isso é usado para armazenar pares chave-valor de requisições HTTP e suas respostas correspondentes. Isso permite a recuperação eficiente de recursos previamente solicitados, reduzindo a necessidade de buscá-los na rede em visitas subsequentes e melhorando o desempenho.
  • Cache-Control: Desenvolvedores podem definir por quanto tempo um recurso em cache deve ser mantido e se ele deve ser revalidado ou servido diretamente do cache.
  • Suporte Offline: Usando a Cache API, você pode criar aplicações web offline-first. Por exemplo, uma PWA pode fornecer recursos em cache quando o usuário está desconectado da rede.

Padrões Negativos e Armazenamento no Lado do Cliente

  • Rastreamento Excessivo: Isso se refere à prática de coletar e armazenar uma quantidade excessiva de dados do usuário em armazenamento do lado do cliente (como cookies, local storage ou session storage) sem consentimento claro, informado ou uma necessidade legítima. Isso frequentemente envolve rastrear o comportamento do usuário, preferências e interações em vários sites ou sessões, o que pode infringir a privacidade do usuário.
  • Browser Fingerprinting: Uma técnica usada para rastrear e identificar usuários individuais com base em características únicas do seu dispositivo e navegador, em vez de depender de cookies ou outros métodos tradicionais de rastreamento. Ao contrário dos cookies, que são armazenados localmente no dispositivo do usuário, o fingerprinting envolve a coleta de uma variedade de informações que podem ser usadas para criar uma "impressão digital" distinta da sessão do navegador do usuário.
  • Configurando Senhas no LocalStorage: Isso pode parecer um padrão negativo mais óbvio, mas armazenar qualquer dado sensível como senhas no local storage representa um risco de segurança. O Local Storage não é criptografado e pode ser acessado facilmente. Portanto, você nunca deve armazenar nenhum tipo de dado sensível lá.

IndexedDB

  • Definição: IndexedDB é usado para armazenar dados estruturados no navegador. Isso está incorporado nos navegadores modernos, permitindo que aplicativos web armazenem e recuperem objetos JavaScript de forma eficiente.

Cache/Service Workers

  • Definição: Um Service Worker é um script que roda em segundo plano separado da sua página web. Ele pode interceptar requisições de rede, acessar o cache e fazer o aplicativo web funcionar offline. Este é um componente chave dos Progressive Web Apps.
# --assignment-- Revise os tópicos e conceitos de Local Storage e CRUD.