dificuldade com o localStorage

Olá, Thales! Como vai?

Vou tentar explicar alguns pontos que podem te ajudar a organizar e recuperar as informações.

Para salvar dados do usuário e exibi-los na página de perfil, você pode fazer o seguinte:

Salvar e Recuperar Dados Únicos no localStorage: No momento do login ou cadastro, salve o identificador único do usuário (como o login ou ID) no localStorage, além dos dados no array cadastros. No perfil, você pode recuperar as informações do usuário específico, sem precisar duplicar nada.

Por exemplo:

localStorage.setItem('usuarioLogado', JSON.stringify(loginUsuario));

Exibir Dados na Página de Perfil: Na perfil.html, pegue o nome do usuário logado usando o valor de usuarioLogado. Depois, filtre o array cadastros e exiba os dados do usuário. Isso evita duplicações a cada atualização de página.

Exemplo:

const usuarioLogado = JSON.parse(localStorage.getItem('usuarioLogado'));
const cadastros = JSON.parse(localStorage.getItem('cadastros')) || [];

const usuarioAtual = cadastros.find(user => user.login === usuarioLogado);

if (usuarioAtual) {
    document.getElementById('nome').innerText = usuarioAtual.nome;
    document.getElementById('usuario').innerText = usuarioAtual.login;
}

Evitar Duplicação: Verifique se o usuário já existe antes de adicionar um novo cadastro.

const usuarioExistente = cadastros.find(user => user.login === loginUsuario);

if (!usuarioExistente) {
    cadastros.push(novoCadastros);
} else {
    // Atualize as informações do usuário existente, se necessário
    // Ou mensagem de erro de usuário já cadastrado
}

Aqui na Alura nos temos esse dois cursos envolvendo localstorage, JavaScript: explorando a manipulação de elementos e da localStorage e JavaScript: manipulando objetos.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Obrigadooo ! consegui aplicar e entender a logica.

Estou aplicando para as outras informaçoes.

o find e o findIndex, tem a mesma fucao ?

to tentando entender melhor sobre isso , primeira vez que vejo sbre . obrigado

Olá, Thales, tudo certo?

Sobre a diferença entre find e findIndex, ambos são métodos muito úteis para manipular arrays no JavaScript, mas eles retornam resultados diferentes:

1. find: Esse método percorre o array e retorna o primeiro elemento que satisfaz a condição fornecida na função. Por exemplo, se você estiver buscando um usuário específico, ele vai retornar o objeto inteiro daquele usuário.

const usuario = cadastros.find(user => user.login === 'usuarioExemplo');
console.log(usuario); 
// Retorna o objeto do usuário ou undefined se não encontrar.

1. findIndex: Esse método também percorre o array, mas em vez de retornar o elemento em si, ele retorna o índice (posição) do primeiro elemento que atende à condição. Caso nenhum elemento atenda à condição, ele retorna -1. É útil quando você precisa saber a posição do item no array para, por exemplo, atualizar ou remover o elemento específico.

const indice = cadastros.findIndex(user => user.login === 'usuarioExemplo');
console.log(indice); 
// Retorna a posição do usuário ou -1 se não encontrar.

Então, enquanto find retorna o objeto (o que você busca), findIndex devolve a posição dele. Assim, você pode escolher o método de acordo com a sua necessidade.

Espero que tenha ajudado! Qualquer coisa, estamos à disposição aqui no fórum!

Abraços!