Utiliser IndexedDB avec Electron

Une base de donnée simple pour votre application locale, compatible avec une application web.

Notre démonstration utilise l'interface Dexie.js pour simplifier l'accès à IndexedDB. Vous avez juste à inclure un petit script dans votre application:

<script src="dexie.min.js"></script> 

Utilisation d'IndexedDB, pas à pas

Le code ci-dessous est disponible dans une application electron totalement fonctionnelle à télécharger. Dans cette page, le code source est seulement présenté.

1) Créer une base et définir un schéma

var db = new Dexie("MyDB")

db.version(1).stores({
  mytable: 'name,data'
})

Cette base de données à une table, "mytable", et deux colonnes, "name" et "data".

2) Ouvrir la base de données

var err = document.getElementById("err")
err.innerHTML = "Database open"

db.open().catch(function(error) {
  err.innerHTML = "Can't open the database! Error:" + error
})

3) Ajoutez quelques entrées

function sayAdded() {
  document.getElementById("added").innerHTML += "Record added!"
}

db.mytable.put({name: "x86", data: "8 MB RAM, 256 GB SSD"}).then(sayAdded)
db.mytable.put({name: "ARM", data: "2 MB RAM, 32 GB EMMC"}).then(sayAdded)

Les lignes sont décrites en objets JS. La démo affiche un message quand une ligne est ajoutée, mais cela peut être supprimé dans l'application finale.

4) Retrouver les données

function showData(data) {
  document.getElementById("data").innerHTML += data[0].data
}

async function getData() {
  var result = await db.mytable.where('name').equals('ARM').toArray()
  showData(result)
}
getData()

On utilise async/await pour être sûrs que les données sont disponibles avant de les traiter. Dans cette démo le traitement consiste seulement à les afficher..

Quand et pourquoi utiliser IndexedDB?

C'est un moyen standard de stocker en permanence de grandes quantités de données et des scripts et de les récupérer avec des requêtes ... Donc, cela permet d'obtenir tous les avantages d'une base de données sans installer quoi que ce soit!

Votre base de données sera disponible à partir de plusieurs applications (puisque elles sont sur le même domaine, localhost), les données sont partagées. Mais cela pourrait avoir un inconvénient. Lorsque Chrome manque d'espace sur le disque dur, il efface toute la base de données sans avertissement! Vous pouvez perdre toutes vos données en une fraction de seconde. Vous pouvez éviter cela en créant une base persistante avec cette commande:

navigator.storage.persist()

Cette commande est implémentée dans Chrome et donc fonctionne avec Electron, elle ne s'applique pas aux autres navigateurs.

Tapez: electron main.js pour lancer la démo.