IndexedDB
Contenu du snippet
<html>
<head>
<title>indexedDB</title>
<style>
.base{background-color:lightYellow;}
.latable{border: 2px solid black;}
</style>
</head>
<body>
<script type="text/javascript">
var db=null;//"mesBases"
var objs;//"maBase"
var keys;//les clefs
var encours=0;//en cours
function indexedDBOk(){return "indexedDB" in window;}
document.addEventListener("DOMContentLoaded", function() {
if(!indexedDBOk){alert("Pas d'indexedDB"); return;}
var openRequest = indexedDB.open("mesBases",1);
openRequest.onupgradeneeded = function(e) {
var thisDB = e.target.result;
if(!thisDB.objectStoreNames.contains("maBase")) {
thisDB.createObjectStore("maBase", { autoIncrement : true });
}
}
openRequest.onsuccess = function(e) {
db = e.target.result;
db.onerror=function (e){alert("Database error: " + e.target.errorCode);};
document.querySelector("#addButton").addEventListener("click", addPerson, false);
getKeys();//on récupère les clefs qui vont -> getObjs()
}
openRequest.onerror = function(e){alert("Error",e.target.error.name);}
},false);
function addPerson() {
var name = document.querySelector("#name").value;
var email = document.querySelector("#email").value;
var person = {
name:name,
email:email,
}
var request = db.transaction(["maBase"],"readwrite").objectStore("maBase").add(person);//,compte);
request.onerror = function(e){alert("Error",e.target.error.name);}
request.onsuccess = function(e) {
alert('Success : "'+name+"/"+email+'"');
getKeys();
//setTimeout(function(){getKeys();getObjs();setTimeout(function(){precsuiv(0);},1000);},1000);
}
}
function count()
{
var request=db.transaction(["maBase"], "readonly").objectStore("maBase").count();
request.onsuccess = function(e){alert(e.target.result);}
request.onerror = function(e){alert("Error "+e.target.error.name);}
}
function precsuiv(x)
{
var le = encours + x;
if(objs.length==0)
{
document.querySelector("#num").value = "";
document.querySelector("#idauto").value = "";
document.querySelector("#compte").value = "";
document.querySelector("#name").value = "";
document.querySelector("#email").value = "";
encours=0;
return;
}
if(le<0){alert("Vous êtes au premier enregistrement");return;}
if(le>=objs.length){alert("Vous êtes au dernier enregistrement");return;}
document.querySelector("#num").value = le;
document.querySelector("#idauto").value = "id : "+keys[le];
document.querySelector("#compte").value = "nbre : "+keys.length;
document.querySelector("#name").value = objs[le]["name"];
document.querySelector("#email").value = objs[le]["email"];
encours=le;
}
function effacer()
{
var request = db.transaction(["maBase"], "readwrite").objectStore("maBase").delete(Number(keys[encours]));
request.onsuccess = function(event)
{
alert("Objet supprimé");
getKeys();
//setTimeout(function(){getKeys();getObjs();setTimeout(function(){precsuiv(0);},1000);},1000);
};
request.onerror = function(event){alert("Objet non supprimé",event.target.error.name);};
}
function supprimer()
{
var request=window.indexedDB.deleteDatabase("mesBases");
request=window.indexedDB.deleteDatabase("maBase");
request.onsuccess = function(event)
{
document.querySelector("#num").value = "";
document.querySelector("#idauto").value = "";
document.querySelector("#compte").value = "";
document.querySelector("#name").value = "";
document.querySelector("#email").value = "";
encours=0;
alert("Base supprimée");
};
request.onerror = function(event){alert("Bases non supprimée",event.target.error.name);};
}
function getObjs()
{
var request = db.transaction(["maBase"], "readonly").objectStore("maBase").getAll();
request.onerror = function(e) {alert("getObjs ",e.target.error.name);};
request.onsuccess = function(e){objs=e.target.result;precsuiv(0);}
}
function getKeys()
{
var request = db.transaction(["maBase"], "readonly").objectStore("maBase").getAllKeys();
request.onerror = function(e){alert("getKeys ",e.target.error.name);};
request.onsuccess = function(e){keys=e.target.result;getObjs();};
}
function charger()
{
getKeys();
getObjs();
precsuiv(0);
}
function All()
{
precsuiv(0);
var request = db.transaction(["maBase"], "readonly").objectStore("maBase").getAll();
request.onerror = function(e) {alert("all ",e.target.error.name);};
request.onsuccess = function(e)
{
var obj=e.target.result;
alert("Nbre obj = " + obj.length);
for(var i in obj)
{
if(obj.hasOwnProperty(i))
{
alert("x["+i + "] = " + obj[i]);
for(var j in obj[i])
{
if(obj[i].hasOwnProperty(j))alert("x["+i+"]["+j+"] = " + obj[i][j]);
}
}
}
};
}
function AllKeys()
{
var request = db.transaction(["maBase"], "readonly").objectStore("maBase").getAllKeys();
request.onerror = function(e) {alert("allKeys ",e.target.error.name);};
request.onsuccess = function(e)
{
var obj=e.target.result;
alert("Nbre obj : " + obj.length);
for(var i in obj)
{
if(obj.hasOwnProperty(i))
{
alert("x["+i + "] = " + obj[i]);
}
}
};
}
function afficherObj(obj)
{
var resultat = 'obj : "' + obj + '"nobj.length[' + obj.length + "]n";
for (var i in obj)
{
if (obj.hasOwnProperty(i))
{
if(""+obj[i]=="[object Object]")afficherObj(obj[i]);
else resultat += "obj[" + i + "] = " + obj[i] + "n";
}
}
alert(resultat);
}
function chercher()
{
var q = prompt("Entrez votre recherche :");
var not=true;
if((q!=null)&&(q!=''))
{
var request = db.transaction(["maBase"], "readonly")
.objectStore("maBase")
.getAll();
request.onerror = function(e) {alert("all ",e.target.error.name);};
request.onsuccess = function(e)
{
var obj=e.target.result;
for(var i in obj)
{
if(obj.hasOwnProperty(i))
{
for(var j in obj[i])
{
if(obj[i][j].hasOwnProperty(i))
{
if(obj[i][j]==q)
{
alert('objet "'+q+'" trouvénIndex : ['+i+']['+j+']n'+obj[i][j]);
not=false;//return;
}
}
}
}
}
if(not)alert('objet "'+q+'" non trouvé');
};
}
}
function fermer()
{
x=db.close();
x.onerror = function(e) {alert("close ",e.target.error.name);};
x.onsuccess = function(e) {alert("Bases fermées");};
}
function noms()
{
if(objs.hasOwnProperty(0)){for(var y in objs[0])alert(y);}else alert("Base vide");
}
function drawOutput()
{
//Clear previous data
document.getElementById("output").innerHTML = "";
var table = document.createElement("table");
table.style.border = "thin solid #0000FF";
var row = table.insertRow(-1);//noms
var firstNameCell = row.insertCell(-1);//noms
firstNameCell.style.border = "solid #00FFFF";//noms
firstNameCell.style.borderWidth = "thin";//noms
firstNameCell.appendChild(document.createTextNode("index"));//noms
for(var y in objs[0])//noms
{
var firstNameCell = row.insertCell(-1);
firstNameCell.style.border = "solid #00FFFF";
firstNameCell.style.borderWidth = "thin";
firstNameCell.appendChild(document.createTextNode(y));
}
for (var i in objs) {
var row = table.insertRow(-1);
var firstNameCell = row.insertCell(-1);//keys
firstNameCell.style.border = "solid #FF0000";//keys
firstNameCell.style.borderWidth = "thin";//keys
firstNameCell.appendChild(document.createTextNode(keys[i]));//keys
for (var j in objs[i]) {
var firstNameCell = row.insertCell(-1);
firstNameCell.style.border = "solid #00FF00";
firstNameCell.style.borderWidth = "thin";
firstNameCell.appendChild(document.createTextNode(objs[i][j]));
}
}
document.getElementById("output").appendChild(table);
}
</script>
<table border="1"><caption>mesBases => maBase</caption><tr>
<th>Index</th><th>Nom</th><th>Mail</th>
</tr><tr>
<td><input type="text" id="num" readonly /></td>
<td><input type="text" id="name" class="base" /></td>
<td><input type="email" id="email" class="base" /></td>
<!--
<td><input type="text" id="name" placeholder="Nom" class="base" /></td>
<td><input type="email" id="email" placeholder="Mail" class="base" /></td>
-->
</tr><tr>
<td><input type="text" id="idauto" readonly /></td>
<td><button id="avant" onClick="javascript:precsuiv(-1);"><< Précédent</button></td>
<td align="right"><button id="suivant" onClick="javascript:precsuiv(1);">Suivant >></button></td>
</tr><tr>
</td><td><input type="text" id="compte" readonly /></td><td>
<button id="addButton">Ajouter</button></td>
<td><button id="deleteButton" onClick="javascript:effacer();">Effacer</button></td>
</tr></table>
<button id="all" onClick="javascript:All();">Objets</button>
<button id="allKeys" onClick="javascript:AllKeys();">Clefs</button>
<button id="chercher" onClick="javascript:chercher();">Chercher</button>
<button id="effacerBase" onClick="javascript:supprimer();">Supprimer la base</button>
<button id="fermerBases" onClick="javascript:fermer();">Fermer les bases</button>
<button id="noms" onClick="javascript:noms();">Noms</button>
<button id="afficher" onClick="javascript:afficherObj(objs);">Afficher</button>
<button id="compte" onClick="javascript:count();">Nombre</button>
<br /><br /><br />
<table class="latable"><tr><td><button id="draw" onClick="javascript:drawOutput();">Table</button>
<button id="notdraw" onClick='javascript:document.getElementById("output").innerHTML = "";'>Efface</button></td></tr><tr><td>
<div id="output"></div>
</td></tr></table>
</body>
</html>Compatibilité : 2
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.