O documento descreve as ferramentas de Web Storage (localStorage e sessionStorage) no HTML5 para armazenamento de dados no navegador, incluindo seus métodos e como manipulá-los.

1. Bloco 5.4
JavaScript - Web Storage
Elaborado por Ruâni Filipe (aluno - Turma 8), com base
em anotações pessoais do assunto, via Course e Aulas
ao Vivo

2. Objetivos:
Manipular os objetos localStorage e
sessionStorage

3. Ferramenta que permite armazenamento de dados nos browsers
Em relação aos Cookies (principal ferramenta antes do HTML5), o
Web Storage:
1) aumentou o limite de armazenamento,
2) evita transferências ao servidor a cada requisição
Esse armazenamento é feito por origem, isto é, domínio + protocolo.
Exemplificando: se o domínio betrybe.com salva um determinado
dado, qualquer outro site baseado nesse domínio conseguirá ler o
dado
Web Storage

4. Além de otimizar a perfomance da engine de renderização, ter os
dados salvos no browser aumenta a UX, uma vez que o site se
adaptará de acordo com as preferências de cada usuário,
mostrando-lhes conteúdos e ações personalizadas
Ex.: o YouTube continuar o vídeo de onde parou, um carrinho de
compras não apagar os items que foram adicionados...
Web Storage - Importância

5. Pequenos arquivos de texto contendo dados salvos
Estruturação:
allCookies = document.cookie
updatedCookie = document.cookie (a diferença que aqui se
define/atualiza um único cookie por vez)
o retorno é uma lista string no modo chave/valor
Cookies

6. Para criar Cookie: nomePropriedade -> document.cookie
Para ler o cookie no JS: let nomeDescritivo = document.cookie
(receberá em retorno uma lista string no padrão chave/valor)
Para mudar o valor do cookie: basta repetir o modo de criação e
irá sobrescrever
Para deletar: basta passar um parâmetro com uma data anterior
Cookies

7. Eles têm a mesma estruturação, a diferença é que Local Storage
armazena enquanto não for deletado o dado e Session Storage
deleta o dado quando fechar a aba ou o navegador
Para acessá-los, abrir a aba application ao inspecionar.
Estruturação: localStorage.metodo(“chave”,”valor”)
sessionStorage.metodo(“chave”,”valor”)
Local Storage e Session Storage

8. Estruturação: localStorage.metodo(“chave”,”valor”)
Podem ser 4 métodos
Set item -> adicionar/armazenar informação
Get item -> ler informação
Remove item -> remover um único dado
Clear -> remover todos os dados
Local Storage e Session Storage - Métodos

9. Podem ser criadas propriedades com a estruturação:
localStorage.nomePropriedade(“valor”)
Os dados também podem ser apagados com a estruturação:
delete localStorage.nomeChave
se nomeChave começar por números, fazer delete
localStorage.[nomeChave]
Local Storage e Session Storage - Métodos