Error with IndexedDB Object Store

Question

Error with IndexedDB Object Store

Navigation

#1 by (1 votes)

0

I'm doing an exercise to learn the IndexedDB API of html5. I am running the following code and it gives me an error that I do not understand what it is. Could you help me solve it?

The error he gives me is:

"Uncaught DOMException: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found."

JS Code:

function iniciar(){
    cajadatos=document.getElementById('cajadatos');
    var boton=document.getElementById('grabar');
    boton.addEventListener('click', agregarobjeto, false);
    if('webkitIndexedDB' in window){
        window.indexedDB=window.IndexedDB;
        window.IDBTransaction=window.IDBTransaction;
        window.IDBKeyRange=window.IDBKeyRange;
        window.IDBCursor=window.IDBCursor;
        } else if ('mozIndexedDB' in window) {
            window.indexedDB=window.mozIndexedDB;
            };
    var solicitud = indexedDB.open('mibase');
    solicitud.addEventListener('error', errores, false);
    solicitud.addEventListener('success', crear, false);
}

function errores(e){
    alert('Error: '+e.code+' '+e.message);
}

function crear(e){
    bd = e.result || e.target.result;
    if(bd.version == '') {
        var solicitud = bd.setVersion('1.0');
        solicitud.addEventListener('error', errores, false);
        solicitud.addEventListener('success', crearbd, false);
    } else { mostrar();
        };
}

function crearbd() {
    var almacen = bd.createObjectStore('peliculas', {keyPath: 'id'});
    almacen.createIndex('BuscarFecha', 'fecha', {unique: false});
}

function agregarobjeto(){
    var clave = document.getElementById('clave').value;
    var titulo = document.getElementById('texto').value;
    var fecha = document.getElementById('fecha').value;
    var transaccion = bd.transaction(['peliculas'], IDBTransaction.READ_WRITE);
    var almacen = transaccion.objectStore('peliculas');
    var solicitud = almacen.add({id: clave, nombre: titulo, fecha: fecha});
    solicitud.addEventListener('success', mostrar, false);
    document.getElementById('clave').value = '';
    document.getElementById('texto').value = '';
    document.getElementById('fecha').value = '';
}

function mostrar() {
    cajadatos.innerHTML = '';
    var transaccion = bd.transaction(['peliculas']);
    var almacen = transaccion.objectStore('peliculas');
    var cursor = almacen.openCursor();
    cursor.addEventListener('success', mostrarlista, false);
}

function mostrarlista(e){
    var cursor = e.result || e.target.result;
    if(cursor) {
        cajadatos.innerHTML += '<div>' + cursor.value.id + ' - ' + cursor.value.nombre + ' - ' + cursor.value.fecha + '</div>';
        cursor.continue();
    };
}

window.addEventListener('load', iniciar, false);

HTML code:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>IndexedDB API</title>
    <link rel="stylesheet" href="indexed.css">
    <script src="indexed.js"></script>
</head>
<body>
    <section id="cajaformulario">
        <form name="formulario">
            <p>Clave:<br><input type="text" name="clave" id="clave"></p>
            <p>Título:<br><input type="text" name="texto" id="texto"></p>
            <p>Año:<br><input type="text" name="fecha" id="fecha"></p>
            <p><input type="button" name="grabar" id="grabar" value="Grabar"></p>
        </form>
    </section>
    <section id="cajadatos">
        No hay información disponible
    </section>
</body>
</html>

javascript indexeddb

asked by Ignacio Lopez 16.01.2017 в 13:39

source

1 answer

How do I protect routes and functions of a controller with custom middleware in laravel 5.3? Validate dates with JavaScript

score 1 · Answer 1

I do not know if it will help you, but I had the same error and I got googling this code that works for me:

var indexedDB = window.indexedDB || window.mozIndexedDB || 
window.webkitIndexedDB || window.msIndexedDB;
var dataBase = null;


function startDB() {
    dataBase = indexedDB.open("cirdmobile", 1);

    dataBase.onupgradeneeded = function (e) {
        active = dataBase.result;
        usuarios = active.createObjectStore("usuarios", { keyPath : 'id', autoIncrement : true });
        var nick = usuarios.createIndex('by_nick', 'nick', { unique : true });
        var password = usuarios.createIndex('by_password', 'password', { unique : false });


    };
    dataBase.onsuccess = function (e) {
        alert('Base de datos cargada correctamente');
    };

    dataBase.onerror = function (e)  {
        alert('Error cargando la base de datos');
    };
}

function add() {
    var active = dataBase.result;
    var data = active.transaction(["usuarios"], "readwrite");
    var object = data.objectStore("usuarios");

    object.put({nick:"nick1",password:"password1"});
    object.put({nick:"nick2",password:"password2"});

    data.oncomplete = function (e) {
        alert('Objeto agregado correctamente');
    };

}

You only need to change the hardcode of the data by the document.getElementById ('xx'). value;

I hope I help you