How to save JavaScript objects in JSON format in localStorage, and then deserialize them?

Nothing like a test to know what is happening (with some corrections):

• getElementById() will not work if you do not use document before
• Remove display: none so that you can see the form
• Instead of putting a onsubmit="" on the form, put a onclick="" on the button and set it button to not reload the page

Code:

function guardaFormulario() {
    //Primeiro como você está fazendo (com as correções):
    var contaCliente = new Object();
    contaCliente.nome = document.getElementById('nome');
    contaCliente.agencia = document.getElementById('agencia');
    contaCliente.conta = document.getElementById('conta');

    console.log(contaCliente.valueOf());

    //Agora como eu acredito que você queira fazer:
    var contaCliente = new Object();
    contaCliente.nome = document.getElementById('nome').value;
    contaCliente.agencia = document.getElementById('agencia').value;
    contaCliente.conta = document.getElementById('conta').value;

    console.log(contaCliente.valueOf());
  }

<div id="formulario">

  <form>
    <div>
      <label for="nome"> Nome: </label>
      <input type="text" id="nome" />
    </div>
    <div>
      <label for="agencia"> Agência: </label>
      <input type="text" id="agencia" />
    </div>

    <div>
      <label for="conta"> Conta: </label>
      <input type="text" id="conta" />
    </div>

    <div class="button">
      <button onclick="guardaFormulario();" type="button">Localizar conta de cliente</button>
    </div>
  </form>
</div>

In the first output of the console an object with html elements will appear, and in the second an object with values of the form inputs

But still this code can be simplified (as I would and with the localStorage):

<div id="formulario">

  <form>
    <div>
      <label for="nome"> Nome: </label>
      <input type="text" id="nome" />
    </div>
    <div>
      <label for="agencia"> Agência: </label>
      <input type="text" id="agencia" />
    </div>

    <div>
      <label for="conta"> Conta: </label>
      <input type="text" id="conta" />
    </div>

    <div class="button">
      <button id="enviar" type="button">Localizar conta de cliente</button>
    </div>
  </form>
</div>
<script>
  //Variáveis dos inputs (html, sem o .value)
  var nome = document.getElementById('nome');
  var agencia = document.getElementById('agencia');
  var conta = document.getElementById('conta');
  //Variável do objeto que será guardado
  var obj;

  //Adiciona um ouvinte de evento ao botão para quando o usuário clicar nele
  document.getElementById('enviar').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);

    //Mostra no console o objeto salvo
    console.log(JSON.parse(localStorage[nome.value]).valueOf());
  });
</script>

wrong

getElementById('nome')

correct

document.getElementById('nome').value

Script

function guardaFormulario(){

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

    var testObject = { 'nome': nome, 'agencia': agencia, 'conta': conta };

     // Coloca o objeto no  storage
    localStorage.setItem('dadosBancarios', JSON.stringify(testObject));

    // Recupera o objeto do storage
    var retrievedObject = localStorage.getItem('dadosBancarios');

    console.log(retrievedObject);                  

}

  

To see the form you have to remove display: none

HTML

<div id="formulario">

        <form onsubmit="return guardaFormulario();">
            <div>
                <label for="nome"> Nome: </label>
                <input type="text" id="nome" />
            </div>
            <div>
                <label for="agencia"> Agência: </label>
                <input type="text" id="agencia" />
            </div>

            <div>
                <label for="conta"> Conta: </label>
                <input type="text" id="conta" />
            </div>

            <div class="button">
                <button type="submit">Localizar conta de cliente</button>
            </div>

        </form>

</div>