3

No meu html estou usando um Javascript para tentar recuperar um objeto Json salvo no localStorage. Estou usando Google Chrome.

Primeiro eu obtenho o valor do atributo "nome" do meu objeto Json que está no localStorage, via formulário, e depois, executo o script que deveria recuperar esse objeto, salvando em uma var. Porém, eu tenho o seguinte erro:

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at buscaConta (principal.html:114)
    at HTMLButtonElement.onclick (principal.html:99)
buscaConta @ principal.html:114
onclick @ principal.html:99

Este é o trecho com meu formulário e o script que recupera o objeto Json pelo "nome".

div  class="formu" id="formularioDeIdent" style="display:none">

            <p class="textoForm"> Informe seu nome: </p> 


        <form>

            <div>
                <label for="nome"> Nome: </label>
                <input type="text" id="nome" />
            </div>


            <div class="centralizar">
            <br><br>
                <button class="botaoPequeno" type="button" onClick="buscaConta()">Buscar sua conta</button>
            </div>
            <br><br>
            <div class="centralizar" style="display:none">
            <br><br>
                <button class="botaoPequeno" type="button" onClick="mudaMenu('formularioDeIdent', 'menu2')">Prosseguir</button>
            </div>

        </form>

    </div>

    <script>
        function buscaConta(){
            var name = document.getElementById('nome');

             //O ERRO OCORRE NA LINHA ABAIXO:
            console.log(JSON.parse(localStorage[nome.value]).valueOf());
            //console.log(oCliente);
        }
    </script>

O formulário de busca e o Json salvo no local Storage:

inserir a descrição da imagem aqui

O código que uso para salvar os objetos Json no localStorage:

<script>

            var nome = document.getElementById('nome');
            var agencia = document.getElementById('agencia');
            var conta = document.getElementById('conta');

            var obj;

            document.getElementById("enviarConta").addEventListener('click', function(){

            //Monta o objeto que será salvo

            obj = {
            nome: nome.value,
            agencia: agencia.value,
            conta: conta.value
            };

            //Mostra no console o objeto antes de ser salvo no localStorage
            console.log(obj.valueOf());
            //Salva o objeto no localStorage
            localStorage[nome.value] = JSON.stringify(obj);

            });
    </script>
16
  • 1
    Não tenho certeza, mas acredito que esse erro está relacionado a forma como salvou o objeto no localStorage, adicione essa parte do código a pergunta
    – Costamilam
    Commented 23/04/2018 às 1:53
  • 1
    localStorage[nome.value] é undefined, provavelmente. teste com console.log(localStorage[nome.value]);
    – Sveen
    Commented 23/04/2018 às 1:54
  • Tem algo errado ai, a key é o JSON, e value é nulo. A key precisa ser Lucas dos Santos e o value devia ser o JSON
    – Sveen
    Commented 23/04/2018 às 1:58
  • Coloca o código de você inserindo os dados no LocalStorage
    – Sveen
    Commented 23/04/2018 às 2:00
  • 1
    @LucasPletsch os dados foram inseridos errados. Nesse caso, você só colocou a key, mas sem value. Você só vai encontrar esse objeto quando você colocar o JSON inteiro na pesquisa
    – Sveen
    Commented 23/04/2018 às 2:04

1 Resposta 1

3

O problema foi o seguinte:

já havia um elemento no html com o id="nome". Então ao dar um

var nome = document.getElementById('nome');

Eu estava buscando um outro elemento do documento, e não o campo do formulário que eu estava preenchendo para fazer a busca no localStorage.

Troquei o id do input de texto do formulário de busca para "nome2" e funcionou!:

 <div>
       <label for="nome"> Nome: </label>
       <input type="text" id="nome2" />
 </div>

O DOM não permite elements com Id duplicado. Se tem, ao fazer uma busca pelo id ele vai pegar o primeiro elemento que achar com o id passado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .