Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
3
respostas

[Dúvida] Ajuda com código

Tenho esse código e está dando erro, me ajuda?

document.addEventListener('DOMContentLoaded', () => {
    const perfilLinks = document.querySelectorAll('.perfil');

    perfilLinks.forEach(link => {
        link.addEventListener('click', (event) => {
            // Encontrar o elemento de nome e a imagem dentro do perfil clicado
            const item = link.closest('.item-perfil');
            if (!item) return;

            const nomeEl = item.querySelector('.nome-perfil');
            const imgEl = item.querySelector('img');

            const nome = nomeEl ? nomeEl.textContent.trim() : '';
            let imgSrc = imgEl ? imgEl.getAttribute('src') : '';

            // Se for um caminho relativo como "assets/1.webp", prefixa "../" para apontar ao root
            if (imgSrc && !imgSrc.startsWith('http') && !imgSrc.startsWith('/') && !imgSrc.startsWith('..')) {
                imgSrc = '../' + imgSrc;
            }

            try {
                
                localStorage.setItem('perfilAtivoImagem', imgSrc);
            } catch (e) {
                // Silenciar erros de localStorage (ex: modo privado)
                console.warn('Não foi possível salvar o perfil ativo no localStorage', e);
            }

            // Deixar o link navegar normalmente para catalogo.html
        });
    });
});

3 respostas
solução!

Oi, Estudante! Tudo bem?

O erro está acontecendo porque falta salvar também o nome do perfil ativo.

No seu código, você captura o nome nesta linha:

const nome = nomeEl ? nomeEl.textContent.trim() : '';

Mas depois salva apenas a imagem no localStorage. Resolva fazendo o seguinte: adicione esta linha dentro do try, antes ou junto da linha que salva a imagem:

localStorage.setItem('perfilAtivoNome', nome);

Ajuste seu código assim:

try {
  localStorage.setItem('perfilAtivoNome', nome);
  localStorage.setItem('perfilAtivoImagem', imgSrc);
} catch (e) {
  console.warn('Nao foi possivel salvar o perfil ativo no localStorage', e);
}

Esse trecho salva duas informações: o nome do perfil em perfilAtivoNome e a imagem do perfil em perfilAtivoImagem. Assim, na página seguinte, você consegue recuperar tanto o nome quanto a imagem do perfil selecionado.

Pontos importantes: depois de salvar, confira na aba Application do navegador, em Local Storage, se as duas chaves aparecem corretamente. Isso ajuda bastante a validar se o clique está funcionando e se os dados foram gravados.

Faça esse teste e me diga se funcionou?

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Oi, obrigado era isso em partes mas ainda não tá indo:

try {
  localStorage.seItem('perfilAtivoNome', nome);
  localStorage.setItem('perfilAtivoImagem', imgSrc);
} catch (e) {
  console.warn('Nao foi possivel salvar o perfil ativo no localStorage', e);
}

Oii! Obrigada por compartilhar o código.

O problema agora é que você escreveu seItem, falta a letra t. Corrija para:

try {
  localStorage.setItem('perfilAtivoNome', nome);
  localStorage.setItem('perfilAtivoImagem', imgSrc);
} catch (e) {
  console.warn('Nao foi possivel salvar o perfil ativo no localStorage', e);
}
Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!