TransWikia.com

Como manter os dados na tela ao clicar no botão voltar com Angular 8

Stack Overflow em Português Asked by Alexsandro Andrade on December 30, 2021

estou estudando angular ao implementar uma pequena aplicação de questionários me deparei com o seguinte problema. ao clicar no botão voltar, observei que as minhas opções selecionadas sumiam, existe alguma forma de manter essas escolhas salvas na tela ate que eu salve o questionário??

meu HTML

    <div class="content">
        <span class="etapas">Etapa 3 de 4</span>
        <h2>{{pergunta?.dsPergunta}}</h2>
        <p>Escolha até 3 opções</p>
        <div class="box-questoes">
            <ul>
                <li *ngFor="let res of pergunta.respostas" (click)="insereResposta(res.cdResposta)"
                        [ngClass]="respostas?.includes(res.cdResposta) ? 'active' : ''">
                    <p>{{res.dsResposta}}</p>
                    <small>{{res.dsAssunto}}</small>
                </li>
            </ul>
        </div>
        <button (click)="addPergunta()" [routerLink]="[ '/comentario']" class="btn-basico" [disabled]="respostas?.length === 0">Continuar</button>
        <a href="#" (click)="limpaRespostas()" [routerLink]="[ '/forma', cdPergunta, avaliacao]" class="link-bottom">Voltar</a>
    </div>
</div>
<ngx-ui-loader></ngx-ui-loader>

meu TS

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PesquisaService } from 'src/app/services/pesquisa.service';
import { Pergunta } from 'src/app/models/pergunta';
import { Resposta } from 'src/app/models/resposta';

@Component({
  selector: 'app-questoes',
  templateUrl: './questoes.component.html',
  styleUrls: ['./questoes.component.scss']
})
export class QuestoesComponent implements OnInit {

  avaliacao: number;
  questoes: Resposta[];
  selecionado = false;
  pergunta: Pergunta;
  respostas: number[];

  cdPergunta: number;
  formaResposta: number;

  constructor(private route: ActivatedRoute, private pesquisaService: PesquisaService) {
    this.respostas = [];
    this.avaliacao = parseInt( this.route.snapshot.paramMap.get('avaliacao'));
    this.formaResposta = parseInt(this.route.snapshot.paramMap.get('formaResposta'), 10);

  }

  ngOnInit() {

      this.pesquisaService.getPerguntaResposta(3).subscribe(perguntaResponse => {
        this.pergunta = perguntaResponse;

        if(this.formaResposta == 14){
         this.pergunta.respostas = this.pergunta.respostas.filter(a => a.cdResposta != 12);
        }

        if(this.avaliacao <= 2){
          this.pergunta.dsPergunta = "O que MENOS você gosta?";
        }if(this.avaliacao >= 4){
          this.pergunta.dsPergunta = "O que MAIS você gosta?";

        }
      });
  }

  insereResposta(cdResposta: number) {
    if (this.respostas.includes(cdResposta)) {
      this.respostas.splice(this.respostas.indexOf(cdResposta), 1);
    } else if (this.respostas.length < 3) {
      this.respostas.push(cdResposta);
    }
    console.log(this.respostas);
  }

  addPergunta() {
    this.pesquisaService.addPergunta(this.pergunta.cdPergunta, this.respostas);
  }

  limpaRespostas() {
    this.pesquisaService.limpaRespostas();
  }

}

One Answer

O localStorage é um tipo de armazenamento local do navegador, nele você armazena itens em chave-valor.

Temos alguns métodos:

  1. setItem: definir valor para uma chave no seu armazenamento local

window.localStorage.setItem(chave, valor)

window.localStorage.setItem("nome", "Alexsandro")

  1. getItem: recuperar o valor definido anteriormente

window.localStorage.getItem(chave)

window.localStorage.getItem("nome") // retorna "Alexsandro"

  1. removeItem: remover o valor definido anteriormente

window.localStorage.removeItem(chave)

window.localStorage.removeItem("nome")

  1. clear: limpar os itens existentes no armazenamento

window.localStorage.clear()


Você poderia fazer algo como:

const formulario = {
       nome: "Alexsandro",
       email: "[email protected]"
    };
    
window.localStorage.setItem("formulario", JSON.stringify(formulario));
var retorno = window.localStorage.getItem("formulario");
console.log(retorno);

Criei um exemplo no jsfiddle.

Para visualizar, se estiver usando o Google Chrome:

  • Abra o Inspecionar
  • Nas abas, clique em Application
  • No menu na lateral esquerda, clique em LocalStorage
  • Clique no item que irá aparecer abaixo do LocalStorage

inserir a descrição da imagem aqui

Answered by LeoHenrique on December 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP