JavaScript - Eliminar elemento de una base indexed db

 
Vista:
sin imagen de perfil
Val: 59
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Eliminar elemento de una base indexed db

Publicado por Jean (22 intervenciones) el 08/12/2021 10:10:45
Hola, tengo este codigo que deberia eliminar los registros que tengan el DNI indicado en el input, me marca el mensaje de que se realizo con éxito la funcion pero no veo que la base de datos se modifique
Gracias
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<head>
    <meta charset="UTF-8">
    <title>IndexedDB: Almacenamiento local con HTML5</title>
    <script type="text/javascript">
        var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
            var dataBase = null;
 
            function startDB() {
 
                dataBase = indexedDB.open("object", 1);
 
                dataBase.onupgradeneeded = function (e) {
 
                    var active = dataBase.result;
 
                    var object = active.createObjectStore("people", {keyPath: 'id', autoIncrement: true});
                    object.createIndex('by_name', 'name', {unique: false});
                    object.createIndex('by_dni', 'dni', {unique: true});
 
                };
 
                dataBase.onsuccess = function (e) {
                    //    alert('Database loaded');
                    loadAll();
                };
 
                dataBase.onerror = function (e) {
                    alert('Error loading database');
                };
 
            }
 
            function add() {
                var active = dataBase.result;
                var data = active.transaction(["people"], "readwrite");
                var object = data.objectStore("people");
 
                var request = object.put({
                    dni: document.querySelector("#dni").value,
                    name: document.querySelector("#name").value,
 
                });
 
                request.onerror = function (e) {
                    alert(request.error.name + '\n\n' + request.error.message);
                };
 
                data.oncomplete = function (e) {
 
                    document.querySelector('#dni').value = '';
                    document.querySelector('#name').value = '';
 
                    alert('Object successfully added');
                    loadAll();
                };
 
            }
 
            function load(id) {
                var active = dataBase.result;
                var data = active.transaction(["people"], "readonly");
                var object = data.objectStore("people");
 
                var request = object.get(parseInt(id));
 
                request.onsuccess = function () {
                    var result = request.result;
 
                    if (result !== undefined) {
                        alert("ID: " + result.id + "\n\
                               DNI " + result.dni + "\n\
                               Name: " + result.name);
                    }
                };
            }
 
 
            function loadAll() {
                var active = dataBase.result;
                var data = active.transaction(["people"], "readonly");
                var object = data.objectStore("people");
 
                var elements = [];
 
                object.openCursor().onsuccess = function (e) {
 
                    var result = e.target.result;
 
                    if (result === null) {
                        return;
                    }
 
                    elements.push(result.value);
                    result.continue();
 
                };
 
                data.oncomplete = function () {
 
                    var outerHTML = '';
 
                    for (var key in elements) {
 
                        outerHTML += '\n\
                        <tr>\n\
                            <td>' + elements[key].dni + '</td>\n\
                            <td>' + elements[key].name + '</td>\n\
                            <td>\n\
                                <button type="button" onclick="load(' + elements[key].id + ')">Detalles</button>\n\
                            </td>\n\
                        </tr>';
 
                    }
 
                    elements = [];
                    document.querySelector("#elementsList").innerHTML = outerHTML;
                };
            }
 
            function eliminar()
            {
                var active = dataBase.result;
                var data = active.transaction(["people"], "readwrite");
                var object = data.objectStore("people");
                var index = object.index('by_dni');
                var request = index.delete(document.querySelector("#eliminado").value);
                request.onerror = function (e) {
                    alert(request.error.name + '\n\n' + request.error.message);
                };
 
                data.oncomplete = function (e) {
 
                    document.querySelector('#dni').value = '';
                    document.querySelector('#name').value = '';
 
                    alert('Object successfully deleted');
                    loadAll();
                };
S
            }
    </script>
</head>
<body onload="startDB();">
    <input type="text" id="dni" placeholder="Introducir DNI" />
    <input type="text" id="name" placeholder="Introducir Nombre" />
    <button type="button" onclick="add();">Guardar</button>
    <hr>
    <div id="elements">
        <table>
            <caption>Peliculas</caption>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th> </th>
                </tr>
            </thead>
            <tbody id="elementsList">
                <tr>
                    <td colspan="3">Sin elementos en la base de datos</td>
                </tr>
            </tbody>
        </table>
    </div>
    <input type="text" id="eliminado" placeholder="Insertar elemento" />
    <button type="button" onclick="eliminar()">DNI de elemento a eliminar </button>
</body>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder