Quiz

Descreva a diferença entre cookie, `sessionStorage` e `localStorage`.

Topics
Web APIsJavaScript
Edit on GitHub

Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser and is accessible by other sites.

Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client.

Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs. Cookies allow you to set an expiry time at which point it would be deleted. Cookies can only be smaller sized data compared to the other two storage methods.

Similaridades

Cookies, localStorage, and sessionStorage, são todos:

  • Mecanismos de armazenamento no lado do cliente. Isso significa que os clientes podem ler e modificar os valores.
  • Armazenamento baseado em chave-valor.
  • Eles só são capazes de armazenar valores como strings. Objetos terão que ser serializados em uma string (JSON.stringify()) a fim de serem armazenados.

Diferenças

PropriedadeCookielocalStoragesessionStorage
IniciadorCliente ou servidor. O servidor pode usar o cabeçalho Set-CookieClienteCliente
VencimentoDefinir manualmentePara sempreAo fechar a aba
Persistente através de sessões do navegadorDepende se a expiração está definidaSimNão
Enviado para o servidor com cada solicitação HTTPOs cookies são automaticamente enviados via cabeçalho CookieNãoNão
Capacidade (por domínio)4kb5MB5MB
AcessoQuqlquer JanelaQuqlquer JanelaMesma Guia

Também existem outros mecanismos de armazenamento do lado do cliente, como IndexedDB que é mais poderoso do que as tecnologias acima mencionadas, mas mais complicado de usar.

Edit on GitHub