how to save data to localStorage with this agenda

Asked

Viewed 47 times

-2

THAT AND THE HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Formulario</title>
</head>
<body>
    <form  onsubmit="salvar()">
        <table>
            <tr>
                <td><label for="nome">Nome:</label></td>
                <td><input type="text" name="nome" id="nome"></td>          
            </tr>
            <tr>
                <td><label for="numero">telefone:</label></td>
                <td><input type="phone" name="numero" id="numero"></td>          
            </tr>
            <tr>
                <td><label for="city">Cidade:</label></td>
                <td>
                    <input type="text" name="cidade" id="city">
                        <label for="UF">Estado:</label>
                        <select name="UF" id="UF">
                            <option value="UF">UF</option>
                            <option value="MG">MG</option>
                            <option value="SP">SP</option>
                            <option value="RJ">RJ</option>
                        </select>
                </td>
            </tr>
            <tr>
                <td><label for="email">E-mail:</label></td>
                <td>
                    <input type="email" name="email" id="email">
                </td>
            </tr>
            <tr>
                <td><label for="info">infomações:</label></td>
                <td><input type="text" name="info" id="info"></td>
            </tr>
            <tr>
                <td><label for="cliente">Cliente</label></td>
                <td><select name="cliente" id="cliente">
                    <option value="CL">CLIENTE</option>
                    <option value="CL-2">CLIENTE_2</option>
                    <option value="CL-3">CLIENTE_3</option>
                    <option value="CL-4">CLIENTE_4</option>
                </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="Salvar..."></td>
                <td><input type="reset" value="Limpar "></td>
            </tr>           
        </table>
    </form>
    
    
</body>

<script src="js/script.js"></script>

</html>

how do I put in localstorage with JS(array)?

I have this script below

if(localStorage.form){
    let formdd = JSON.parse(localStorage.form);
    document.getElementById('nome').value = formdd.nome;
    document.getElementById('numero').value = formdd.numero;
    document.getElementById('city').value = formdd.city;
    document.getElementById('estado').value = formdd.estado;
    document.getElementById('email').value = formdd.email;
    document.getElementById('info').value = formdd.info;
    document.getElementById('cliente').value = formdd.cliente;
}

function salvar(){
    let formDate = new Object()
    formDate.nome = document.getElementById('nome').value;
    formDate.telefone = document.getElementById('numero').value;
    formDate.city = document.getElementById('city').value;
    formDate.estado = document.getElementById('estado').value;
    formDate.email = document.getElementById('email').value;
    formDate.info = document.getElementById('info').value;
    formDate.cliente = document.getElementById('cliente').value;

    localStorage.setItem('form', JSON.stringify(formDate));
    localStorage.getItem('form');
    
};

but would like to make it save more than one record and not rewrite the data

javascript localstorage

  • Do you want to save HTML to localStorage? what have you tried to do? Put it where you’re struggling,

  • i tried but I need to make a JS script that saves the data from that schedule and enables me to record others in localStorage, I know that uses Array but I am unsuccessful

  • Your question is not clear, you want to send the form and save the data, want to save the code?

  • updated the question, I think it became clearer. I would like to save more than one record

  • You need to convert JSON when saving the data. JSON.stringify - https://answall.com/questions/329223/storr-um-array-de-objetos-em-um-local-storage-com-js

  • would have as axiliar me in my code I tried to do for what this link but did not succeed

Show 1 more comment

1 answer

0

You need to put the Return before the onsubmit function for the page to stay (returns true if you want to send the form anyway):

<form  onsubmit="return salvar()">

In your Save() function, you call the id 'status', but in your HTML it is UF, I changed it here, and I put a save alert successfully:

function salvar(){
    let formDate = new Object()
    formDate.nome = document.getElementById('nome').value;    
    formDate.telefone = document.getElementById('numero').value; 
    formDate.city = document.getElementById('city').value;
    formDate.estado = document.getElementById('UF').value;
    formDate.email = document.getElementById('email').value;
    formDate.info = document.getElementById('info').value;
    formDate.cliente = document.getElementById('cliente').value;

    localStorage.setItem('form', JSON.stringify(formDate));
    localStorage.getItem('form');
    
    alert("salvo com sucesso");
    return false;   
};

The part, which returns the values pro forma is ok.

  • thank you very much!

Browser other questions tagged javascript localstorage

You are not signed in. Login or sign up in order to post.