Estamos trabajando en algo propio llamado KODOTI. Click para unirte
Se viene KODOTI. Únete

Ejemplo de CRUD usando LocalStorage de HTML 5

Realizaremos un pequeño CRUD usando LocalStorage para persistir la data de nuestros usuarios.

Rodríguez Patiño, Eduardo
9,841 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

El objetivo de esta entrada es realizar un pequeño CRUD para darnos una idea de que uso podriamos darle al LocalStorage y les pueda servir como idea para sus futuros proyectos o problemas actuales. En este caso hemos creado un pequeño listado usando una tabla de HTML en la cual iremos iterando los valores guardados en el LocalStorage.

Explicando la lógica

  1. Los usuarios lo guardamos en un array de objetos de javascript, estos son serializados y almacenados en el LocalStorage usando JSON.stringify.
  2. Tenemos funciones básicas para listar, agregar y retirar.
    • La idea es obtener los valores de nuestro LocalStorage y manipularlos sobrescribiendo la información. Ejm: supongamos que tenemos que eliminar un registro.
    • Obtenemos lo que hay actualmente dentro del LocalSotrage ``` var users = [], dataInLocalStorage = localStorage.getItem(localStorageKeyName);
    • Deseralizamos la información actual usando JSON.parse
      users = JSON.parse(dataInLocalStorage);
      ```
              
    • Removes el indice del array (el que queremos eliminar), volvemos a serializar el nuevo array dentro de nuestro localStorage y finalmente volvemos a cargar la tabla ``` users.splice(index, 1); localStorage.setItem(localStorageKeyName, JSON.stringify(users)); loadFromLocalStorage() ```

En conclusión: la idea es sobrescribir la data para realizar el CRUD porque lo almacenado finalmente en el LocalStorage es una cadena (string).

Ejemplo completo

Les copio el código para que puedan probarlo ustedes mismos, espero que les sea de utilidad y les de varias ideas para hacer uso de LocalStorage. Lo complejo de este ejemplo, tal vez sea la manipulación del DOM para listar la tabla de nuevo ante cada evento del CRUD, por el resto la lógica es sencilla.

<!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>

Si tienes dudas me dejas un comentario para ayudarte.

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín