Ejemplo de CRUD usando LocalStorage de HTML 5
Actualizado el 25 Mayo, 2016 y leído 4,685 veces
Calificación: 9.33 / 10

Ejemplo de CRUD usando LocalStorage de HTML 5

Anexsoft

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.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.