Follow me
RSS feed
My sources
My Viadeo

Client-side Database Storage avec Safari

Greg | 20 May 2009

appleJe vous propose d'explorer et tester les possibilités offertes par l'utilisation du système de base de données client-side de Safari.

L'idée vient avec HTML5. En effet, la norme du futur HTML prévoit la possibilité de stocker des données dans des bases, côté client. Cette possibilité était décrite dans le draft de la norme de février 2009, mais semble avoir disparu dans la dernière version. Pas grave, la solution existe déjà depuis 2007 dans Safari. Donc, que vous ayez une version 3 ou une version 4beta du navigateur, sous MacOSX ou sous Windows, vous pouvez tester ce qui va suivre1...

Dans cet article, nous allons utiliser une simple base et faire des opérations CRUD classiques. Mais sachez que vous avez à disposition une base de données tout à fait classique2 avec laquelle vous pouvez utiliser presque toute la syntaxe SQL92.

S'agissant d'un stockage côté client, vous vous en seriez douté, mais les APIs d'accès sont en Javascript. Nous allons donc abondamment utiliser ce langage.

La création d'une base se fait via la fonction openDatabase qui prend 4 paramètres : le nom de la base, sa version, une description et la taille maximale utilisable pour le stockage des données. Cette fonction renvoie un objet Database. Avec cet objet nous allons pouvoir faire des transactions (via Database.transaction. Chaque transaction prend en paramètre une fonction à laquelle est passé un objet SQLTransaction. Nous utiliserons alors cet objet pour faire une requête via SQLTransaction.executeSql. Voici un petit exemple :

// Ouverture de la base
db = openDatabase("MaBase", "1.0", "Client-Side Database Storage - Example 1", 200000)


// Creation d'une table
db.transaction(function (tx) {
  tx.executeSql("CREATE TABLE MaTable (id REAL UNIQUE, key TEXT, value TEXT)")

}

// Insertion de données
db.transaction(function (tx) {
  tx.executeSql("INSERT INTO MaTable (id, key, value) VALUES (?, ?, ?)", [id, key, value])

})

// Recherche de données
db.transaction(function (tx) {
  tx.executeSql("SELECT * FROM MaTable", [], function(tx, result) {
    // Traiter les résultats (result)
  }, function(tx, error) {
    alert( error )

  })
})

La récupération des données après un SELECT est elle aussi très simple. Dans la fonction passée après la requête, le paramètre result est un objet de type SQLResultSet. Nous pouvons en obtenir un objet de type SQLResultSetRowList via SQLResultSet.rows. Pour connaître le nombre de ligne retourné, nous utiliserons alors SQLResultSetRowList.length et pour obtenir les données d'une ligne en particulier, nous utilisons SQLResultSetRowList.item( i ) ou i est un numéro de ligne entre 0 et SQLResultSetRowList.length (exclu). La méthode SQLResultSetRowList.item( i ) renvois un objet Javascript classique ayant des attributs de même nom que les colonnes de la table.

db.transaction(function(tx) {
  tx.executeSql("SELECT id, key, value FROM MaTable", [], function(tx, result) {
    for( var i = 0
 i < result.rows.length
 ++i ) {
      var row = result.rows.item(i)

      // Faire quelque chose avec row.id, row.key et row.value
    }
  }, function(tx, error) {
    alert( error.message )

  })
})

Pour illustrer tout cela, voici un petit exemple avec son code.

Sachez que si vous avez opté pour Safari 4beta, vous pouvez visualiser le contenu de vos bases via l'inspecteur Web.

csds

Have fun !

1 Je vous conseil cependant d'utiliser la version 4beta.
2Il s'agit d'une base SQLite.

Copyright © 2009 - 2011 Grégoire Lejeune.
All documents licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License, except ones with specified licence.
Powered by Jekyll.