0

quiero guardar varios datos en el localstorage, el código que tengo en el momento solo me deja guardar un solo dato, ya que cuando intento meter otro dato me remplaza el que ya había guardado, les dejo el script.

 $(document).ready(function () {
$("#btn").click(function (e) {
  var jsonData = {};

  var formData = $("#formulario").serializeArray();
  console.log(formData);

  $.each(formData, function () {
    if (jsonData[this.name]) {
      if (!jsonData[this.name].push) {
        jsonData[this.name] = [jsonData[this.name]];
      }
      jsonData[this.name].push(this.value);
    } else {
      jsonData[this.name] = this.value;
    }
    localStorage.setItem('formulario', JSON.stringify(jsonData));


  });
  $.ajax(
    {
      url: "#",
      type: "POST",
      data: jsonData,

    });
  e.preventDefault();
});

});

espero me puedan ayudar muchas gracias :)

2
  • Quieres guardar un arreglo con varios datos? o un objeto|propiedad|valor? el 11 dic. 2019 a las 20:44
  • un arreglo con varios datos el 12 dic. 2019 a las 14:07

1 respuesta 1

1

Ejemplo de un crud con LocalStore

En este espacio se muestra un crud que te permite guardar varios registros, y datos.

<!DOCTYPE html>
<html lang="es-ES">

<head>
    <title>CRUD con Local Storage</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">

                <h1 class="jumbotron">Ejemplo de CRUD usando Local Storage</h1>

                <table id="grid" class="table table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Current Job</th>
                            <th>Age</th>
                            <th style="width:80px;">

                            </th>
                        </tr>
                        <tr>
                            <th>
                                <input id="name" type="text" class="form-control" />
                            </th>
                            <th>
                                <input id="job" type="text" class="form-control" />
                            </th>
                            <th>
                                <input id="age" type="text" class="form-control" />
                            </th>
                            <th>
                                <button id="btn-add" class="btn btn-default">Add</button>
                            </th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        window.onload = function () {
            var localStorageKeyName = 'data';

            loadFromLocalStorage();

            document.querySelector("#btn-add").addEventListener('click', function () {
                var name = document.getElementById("name"),
                    job = document.getElementById("job"),
                    age = document.getElementById("age");

                // Validate
                if (name.value.length === 0 || job.value.length === 0 || !parseInt(age.value)) return;

                var user = {
                    name: name.value,
                    job: job.value,
                    age: age.value
                };

                // Clean data
                name.value = '';
                job.value = '';
                age.value = '';

                // Append to my localStorage
                appendObjectToLocalStorage(user);
            })

            function appendObjectToLocalStorage(obj) {
                var users = [],
                    dataInLocalStorage = localStorage.getItem(localStorageKeyName);

                if (dataInLocalStorage !== null) {
                    users = JSON.parse(dataInLocalStorage);
                }

                users.push(obj);

                localStorage.setItem(localStorageKeyName, JSON.stringify(users));

                loadFromLocalStorage();
            }

            function loadFromLocalStorage() {
                var users = [],
                    dataInLocalStorage = localStorage.getItem(localStorageKeyName),
                    gridBody = document.querySelector("#grid tbody");

                if (dataInLocalStorage !== null) {
                    users = JSON.parse(dataInLocalStorage);
                }

                // Draw TR from TBODY
                gridBody.innerHTML = '';

                users.forEach(function (x, i) {
                    var tr = document.createElement("tr"),
                        tdName = document.createElement("td"),
                        tdJob = document.createElement("td"),
                        tdAge = document.createElement("td"),
                        tdRemove = document.createElement("td"),
                        btnRemove = document.createElement("button");

                    tdName.innerHTML = x.name;
                    tdJob.innerHTML = x.job;
                    tdAge.innerHTML = x.age;

                    btnRemove.textContent = 'Remove';
                    btnRemove.className = 'btn btn-xs btn-danger';
                    btnRemove.addEventListener('click', function(){
                        removeFromLocalStorage(i);
                    });

                    tdRemove.appendChild(btnRemove);

                    tr.appendChild(tdName);
                    tr.appendChild(tdJob);
                    tr.appendChild(tdAge);
                    tr.appendChild(tdRemove);

                    gridBody.appendChild(tr);
                });
            }

            function removeFromLocalStorage(index){
                var users = [],
                    dataInLocalStorage = localStorage.getItem(localStorageKeyName);

                users = JSON.parse(dataInLocalStorage);

                users.splice(index, 1);

                localStorage.setItem(localStorageKeyName, JSON.stringify(users));

                loadFromLocalStorage();
            }
        }
    </script>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.