IndexedDB

Soyez le premier à donner votre avis sur cette source.

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>

Imprimer   E-mail

Ajouter un Commentaire


Code de sécurité
Rafraîchir