js5

JavaScript parte 5

Web Storage, JSON e a Lista de Tarefas 📓 x2

---

Na última aula... (1/4)

• Na forma literal ➡️:
  • Preferiemos ela, por ser mais curta e simples

let jogador = {
  pontos: 1420,
  vidas: 2
};

let jogador = new Object();
jogador.pontos = 1420;
jogador.vidas = 2;

• ⬅️ Usando o operador new:
  • Equivalente a let jogador = {}
  • Dizemos que estamos usando uma função construtora

---

Na última aula... (2/4)

• Podemos passar objetos como argumentos para funções
• A função é declarada como recebendo 1 parâmetro ➡️
• Chamamos ela passando um objeto como argumento ➡️
• Para um vetor percorremo-lo chamando a função para o i-ésimo item ↘️

let jogadores = [
  { nome: 'Yoda', pontos: 1420 },
  { nome: 'Leia', pontos: 3010 }
];

function passouDeFase(player) {
  // a função recebe 1 parâmetro,
  // que demos o nome de player
  player.pontos += 1000;
}

// podemos chamar a função para 1 jogador:
passouDeFase(jogadores[0]);   // Yoda

// ...ou para todos eles, percorrendo o vetor:
for (let i = 0; i < jogadores.length; i++) {
  passouDeFase(jogadores[i]);
}

// ELEGANTE, usando vetor.forEach:
jogadores.forEach(passouDeFase);  // 🌟🌟🌟

---

Na última aula... (3/4)

Inserção do elemento na árvore DOM

• Para vincularmos um elemento criado, precisamos conhecer seu pai
• Então, inserimos o elemento usando um dos seguintes comandos:
  1. appendChild: será o filho mais à direita
  2. insertBefore: será o filho que vem logo antes de outro
  3. replaceChild: substituirá um filho existente

let containerEl = document.querySelector('#ovelhas');
let novaOvelhaEl = document.createElement('img');
novaOvelhaEl.src = 'img/ovelho-pixel.png';
containerEl.appendChild(novaOvelhaEl);

---

Na última aula... (4/4)

---

Roteiro

1. Usando o Web Storage
   1. Salvando para sempre com o localStorage
   2. Salvando temporariamente com o sessionStorage
2. Lista de Tarefas 📓 x2 (parte 1)
3. O formato JSON
4. Lista de Tarefas 📓 x2 (parte 2)

---

Usando o
Web Storage

Salvando dados na página

• Por que e o que salvar?
• O Web Storage
  • localStorage
  • sessionStorage

---

Por que e o que salvar?

• As nossas páginas podem querer salvar várias coisas:
  1. Exemplo: Moodle
     • Motivo: manter preferências do usuário sobre a interface
     • O que salvar? o que está aberto/fechado, a língua etc
  2. Exemplo: Slides da aula
     • Motivo: mostrar o "tutorial" apenas 3x
     • O que salvar? quantas vezes já mostrou o tutorial
  3. Exemplo: Trello
     • Motivo: guardar um "rascunho" que ainda não foi salvo
     • O que salvar? o conteúdo digitado pelo usuário

---

---

---

O Web Storage

• O Web Storage permite páginas armazenarem dados no navegador
  • storage === armazenamento
• Existem dois sabores:
  1. localStorage, salva os dados "para sempre"
  2. sessionStorage, salva apenas "durante a sessão"
• Os dados são salvos apenas no próprio navegador
  • Isto é, se você abrir a página em outro navegador ou computador, ainda não existem dados salvos

---

localStorage e sessionStorage

• Ambos nos permitem armazenar valores dentro de Strings
• Cada item armazenado é composto por uma chave (nome) e um valor
  • Exemplo (salvando):

    window.localStorage.setItem('personagem', 'Jake');
    window.localStorage.setItem('quest', 'Salvar a Jujuba');

    • Lembre-se: window.localStorage
  • Exemplo (recuperando):

    let nome = localStorage.getItem('personagem');    // retorna "Jake"
    let objetivo = localStorage.getItem('quest');     // retorna "Salvar a Jujuba"

---

localStorage

• O navegador armazena permanentemente, ou até que o usuário limpe:

1. É possível inspecionar o que foi salvo na aba Application:

---

Exemplo de uso do localStorage (1/2)

• Um evento de clique em um botão que faz o menu aparecer e desaparecer:

  // ...
  botaoMenuEl.addEventListener('click', function() {
    let menuEl = document.querySelector('#menu'),
      isExpandido = menuEl.classList.toggle('expandido');
  
    // isExpandido = true ou false
    localStorage.setItem('menu-esta-expandido', isExpandido);
  });

  • (continua no próximo slide)

---

Exemplo de uso do localStorage (2/2)

• Após a página ter sido carregada (ex, um script ao final do body):

  let devoExpandirMenu = localStorage.getItem('menu-esta-expandido');
  
  if (devoExpandirMenu === 'true') {        // lembre-se: tudo é salvo como String
    let menuEl = document.querySelector('#menu');
    menuEl.classList.add('expandido');
  }

  • Ou seja, expande o menu se o usuário o havia deixado expandido antes

---

Principais métodos do localStorage

• Salvar alguma coisa:

  localStorage.setItem('chave', 'valor');

• Recuperar um item a partir de sua chave:

  localStorage.getItem('chave');

• Excluir um item:

  localStorage.removeItem('chave');

---

sessionStorage

• Exata mesma funcionalidade do localStorage, porém o navegador armazena as informações apenas enquanto o usuário está "em uma sessão"
  • Uma sessão é encerrada:
    1. Com o usuário digitando outro endereço na barra
    2. O navegador fechando
    3. O usuário navegando para outro domínio naquela mesma janela/aba
• Os métodos do sessionStorage são os mesmos do localStorage

---

Lista de Tarefas 📓 x2

Voltando à atividade, parte 1

• O que mudou no código
• Atividade, parte 1

---

O que mudou?

• Um novo <input> para o nome do "dono da lista"
• Botões para #salvar e #carregar os dados

---

Atividade, parte 1

• Os exercícios 1, 2 e desafio 1 (semana passada) estão feitos:
  • [Exercício 1] Carregar o vetor tarefas
  • [Exercício 2] Inserir nova tarefa
  • [Desafio 1]: Inserir nova tarefa no topo
• Agora você deve baixar o código atualizado e fazer o Exercício 3
  • Enunciado completo
  • Resumão: implemente os botões #salvar e #carregar para armazenar e recuperar quem é o dono da lista de tarefas

---

Atividade, parte 1 (cont.)

• Agora, faça o Exercício 4, que é tentar salvar também o vetor de tarefas quando clicarem em #salvar
• Antes de tentar recuperar as tarefas no #carregar, use a ferramenta do desenvolvedor e veja o que foi salvo...
  • Era o que você esperava?
  • Para corrigir isso, volte aos slides/vídeos da aula

Atenção: Não avance os slides até fazer o exercício 4

• O que foi salvo em vez do vetor:

---

Formato de armazenamento

• Como dito, o Web Storage armazena apenas Strings
  • Mas seria útil armazenar objetos complexos. Por exemplo:

    // ao clicar em 'salvar'
    let jogo = { fase: 4, vidas: 5, jogador: 'Ariosvaldo' };
    localStorage.setItem('meu-save', jogo);
    
    // ao clicar em 'carregar'
    jogo = localStorage.getItem('meu-save');  // jogo = "[object Object]"

  • Precisamos de uma forma para representar o objeto dentro de uma String... tipo assim:

    localStorage.setItem('meu-save', 'propriedades: fase = 4, vidas = 5...');

---

Representando objetos em Strings

• Na verdade, o JavaScript sabe serializar e desserializar objetos em Strings, usando um formato que se chama JSON
  • JSON é JavaScript Object Notation
• Salvando:

  // Usamos JSON.stringify(objeto)
  localStorage.setItem('estado-do-jogo', JSON.stringify(jogo));
  // Salvou a string: {"fase":4,"vidas":5,"jogador":"Ariosvaldo"}"

• Recuperando:

  let jogo = localStorage.getItem('estado-do-jogo');
  jogo = JSON.parse(jogo);  // Usamos JSON.parse(stringComUmObjeto)

• Agora você já pode fazer o Exercício 5 :3

[JSON]: JavaScript Object Notation

---

O formato JSON

Representando dados

• O que é JSON
• Descrição do formato
• JSON no navegador

---

O que é JSON: JavaScript Object Notation

• É um formato criado para representar dados
• Baseado na notação literal de objetos do JavaScript
• Pode ser usado para troca de informação entre programas escritos em diversas linguagens
  • Podemos escrever o formato dentro de uma String
  • Podemos fazer um programa enviar dados nesse formato pr'outro
  • Podemos ter arquivos .json. Exemplo: produto.json

    {
      "identificador": 44235,
      "nome": "Caixinha de fósforo",
      "quantidade": 3
    }

---

Descrição do formato JSON

• O formato possui seis tipos de valores:
  • Objetos
  • Arrays
  • String
  • Number
  • Boolean
  • null
• Um objeto JSON é como um objeto JavaScript: um container de propriedades (nome, valor)
  • Um nome de propriedade é sempre uma String entre áspas duplas
  • Um valor pode ser de qualquer tipo dos listados acima

---

JSON no navegador

• O objeto window possui o objeto JSON que contém métodos de conversão do formato JSON entre string e objetos JavaScript
  • De JavaScript para string (serialização):

    JSON.stringify({ nome: 'Flavio', sobrenome: 'Coutinho' });  // JSON.stringify
    // retorna '{"nome":"Flavio","sobrenome":"Coutinho"}'

  • De string para JavaScript (desserialização):

    let banco = JSON.parse('{"nome":"Itaú","codigo":"341"}');   // JSON.parse
    console.log(banco.nome);
    // imprime Itaú

---

Lista de Tarefas 📓 x2

Voltando à atividade, parte 2

• Atividade, parte 2

---

Atividade, parte 2

• Agora que você já sabe como salvar representar um Object dentro de uma String, você pode salvar objetos no localStorage/sessionStorage

  let frutas = [
    { nome: 'Morango', calorias: 20 },
    { nome: 'Banana', calorias: 45 }
  ];
  localStorage.setItem('minhas-frutas', JSON.stringify(frutas));

• E, para recuperar:

  let frutasComoString = localStorage.getItem('minhas-frutas');
  frutas = JSON.parse(frutasComoString);

---

Atividade, parte 2 (cont.)

• No Exercício 5, você deve salvar e carregar a lista de tarefas do usuário, no mesmo momento que salva/carrega o nome do dono da lista
• No Desafio 1, você deve implementar o botão #minimizar que minimiza/restaura a logomarca
  • Para isso, simplesmente alterne a classe .minimizado em #marca
  • Além disso, você deve guardar no sessionStorage se a #marca está minimizada ou não
  • Quando a página for carregada, você deve verificar o sessionStorage para ver se precisa minimizar a logomarca (i.e., colocar a classe)

---

Referências

1. Capítulo 12 do livro "Head First: JavaScript"
2. Apêndice E do livro "JavaScript - The Good Parts"
3. Mozilla Developer Network (MDN)