CodeS-SourceS
Rechercher un code, un tuto, une réponse

IndexedDB

Soyez le premier à donner votre avis sur cette source.

Snippet vu 114 fois

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
Ajouter un commentaire

Commentaires

Donnez votre avis

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.