cefet_front_end

JavaScript parte 5

Web Storage, JSON

---

Na última aula… (1/4)

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

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

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

• :arrow_left: 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 :arrow_right:
• Chamamos ela passando um objeto como argumento :arrow_right:
• Para um vetor percorremo-lo chamando a função para o i-ésimo item :arrow_lower_right:

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. O formato JSON

---

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

---

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

---

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ú
    

---

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)