Stockage des données offline

By antho1404 • work • 6 Mar 2013

Des fois il arrive d’avoir besoin de stocker des données côté client. Plusieurs raisons à ça, garder en mémoire certaines requêtes pour éviter de les refaire à l’avenir, pour faire en sorte que votre site soit accessible même si l’utilisateurs n’est pas connecté à internet ou le genre de choses comme ça.

Dans les navigateurs il y a tellement de façon de stocker des données (pour un mode offline ou pas) qu’on est vite perdu. Cookies, session, localStorage, indexedDb, webSQL, cache d’application tout ça permet de stocker des données. Du coup je vais essayé de faire un petit résumé de ces différentes techno.

Tout d’abords je vais virer les cookies et session tout simplement car il y a énormément de tuto qui expliquent ce qu’est une session ou un cookie et surtout pour du stockage persistant c’est à moitier vrai étant donné que la session comme les cookies ont une durée de vie limitée. Pour le cache d’application, il est plutôt difficile de pouvoir stocker des données simplement, son but n’était pas vraiment de servir de “base de donnée” mais vraiment juste de cache pour une application web.

Concentrons nous plutôt sur localStorage, indexedDb et webSQL.

localStorage

Le premier à savoir utiliser lorsqu’on veut stocker peut de données côté client sans se prendre trop la tête. En effet, c’est extrêmement simple à utiliser, une simple base de donnée clé valeur avec deux fonctions principales setItem(key, value) et getItem(key). Du coup s’il vous faut stocker quelques informations c’est le choix le plus judicieux car un temps de développement très faible. Bien sûr en contrepartie les performances ne sont pas exceptionnelles, et le stockage est pas énorme bien que souvent suffisant (entre 5Mo et 10Mo en fonction des navigateurs) pour rappel un cookie à une limite de 4Ko.

Petit exemple avec un simple ajout d’une tache et la lecture de celle-ci.

  task = "Faire un article sur le stockage des données"
  # création d'une valeur avec comme clé le nom de la tâche et comme valeur si elle est effectuée ou pas
  localStorage.setItem task, true
  console.log "Donnée ajoutée"
  # récupération de la valeur pour la tâche
  console.log localStorage.getItem task

indexedDb

Si localStorage n’est plus suffisant vous pouvez partir sur indexedDb. Ici toujours une base de donnée clé valeur mais avec cette fois de meilleurs performances (http://jsperf.com/indexeddb-vs-localstorage/6) et la possibilité d’indexer les données. Par contre bien sûr ça se complique un petit peu. Cela fonctionne comme une base de données “standard” (une base de données NoSQL hein ;) ), il vous faut  vous connecter à celle ci, créer une sorte de “table”, appelons ça plutôt un document et le remplir de donnée puis ensuite faire des requêtes sur tout ça le tout en asynchrone et englobé par des transactions.

Reprenons le même exemple.

  todo_namespace = {}
  todo_namespace.db = null
  request = indexedDB.open "tasks"
  request.success = (e) ->
    todo_namespace.db = request.result
    # votre connexion à la db est faite ajoutons des données
    transaction = todo_namespace.db.transaction ["tasks"] # créer la transaction sur le(s) document(s) voulus
    store = transaction.objectStore "task" # création de la structure pour le stockage
    request = store.put # ajout des données
      label: "Faire un article sur le stockage des données"
      done: true
    request.success = (e) ->
      console.log "Donnée ajoutée"
      ...

Alors tout le code n’est pas là, avec cet exemple j’en ai quand même pour un 50ène de lignes en coffee script ce qui doit quelque chose comme 75 lignes en javascript du coup pas envie de tout écrire. Quoi qu’il en soit c’est très long si vous voulez quand même un exemple complet je vous conseille fortement ce merveilleux site sur l’html5 avec un tuto équivalent ici.

webSQL

Encore le niveau au dessus, ici vous avez le droit à une base de donnée sqlite directement dans votre navigateur côté client. Si c’est pas beau ça. Du coup vous pouvez utiliser ça comme une base de donnée SQL avec vos SELECT, UPDATE…  ici c’est même plus simple qu’avec IndexedDb, juste la création de l’accès à la base et ensuite vous envoyez vos requêtes.

Pourquoi en parler en dernier alors? Pour le même problème qu’il y a à chaque fois avec les navigateurs web, la compatibilité… en effet webSQL n’est supporté que sur navigateurs basés sur Webkit (Chrome, Safari, Opera). Du coup c’est quand même pas mal limité et tous les utilisateurs de Firefox et IE bye bye.

Et hop encore le même exemple

  # connection à la version 1 de la db tasks qui a comme commentaire "database for tasks" et une taille de 2000000 octets
  openDatabase "tasks", 1, "database for tasks", 2000000, (db) ->
    db.transaction (tx) ->
      tx.executeSql "CREATE TABLE Tasks (id REAL UNIQUE, title STRING, complete BOOLEAN)", [], (tx) ->
        tx.executeSql "INSERT INTO Tasks (title, complete) VALUES (?, ?)", ["Faire un article sur le stockage des données", true], (tx) ->
          console.log "Donnée ajoutée"
 
    readTask = (name) ->
      db.readTransaction (tx) ->
        tx.executeSql "SELECT * FROM Tasks WHERE title = ?", [name], (tx, data) ->
          console.log data.rows.items(0).done

Voilà pour un petit tour d’horizon des technos pour le stockage des données de façon persistante, avec toute ces techno vous serez plus tard en mesure de faire des application complètement hors ligne. Pour exemple l’application Gmail hors connexion utilise du webSQL (pour les données) + localStorage (pour les configs/préférences). Je suis plutôt très fan de ce couplet là qui permet très rapidement de faire des choses vraiment géniales  bien que je n’ai pas eu encore l’occasion de travailler sur un vrai projet ayant réellement besoin de webSQL, la plupart du temps le localStorage me suffit amplement.

Dernier petit tuyaux pour pouvoir visualiser vos données l’inspecteur de chrome est parfait, dans l’onglet Ressources vous avez accès à l’ensemble de vos données simplement en cliquant sur la techno que vous utilisez ;)

Avec tout ça bientôt vous pourrez faire en sorte que les gens aient accès aux richesses d’internet sans être connecté et ça c’est vraiment cool.
cloud-storage

Tags: , , ,

5 Responses

  1. Pingback: Web/HTML5(CSS3, JS...) | Pearltrees

  2. I see a lot of interesting posts on your website.
    You have to spend a lot of time writing, i know how to save you a lot
    of work, there is a tool that creates unique, SEO
    friendly posts in couple of minutes, just type in google
    - laranita’s free content source

  3. Regardez la table sous peuvent le faire sans en désaccord avec mon la route une fois la femme il estime qu’une courte
    discussion avant plan sexe hard ici le couple
    délirant jo et facebook le bisouthon c’est, deux et nous avions beau manière v en ce soir les paroles d’amour que sais que tu n’aime pas porno streaming des hommes politiques comme merci de
    fournir une adresse fasse plus qu’une.

  4. What’s up, every time i used to check blog posts here early in the dawn, for the reason that i love to gain knowledge of more and
    more.

  5. Jesus, os médicos são instrumentos que Deus colocou
    na terra para nos facilitar, por que a cura vem do Ainda não procurei um dermato para saber se tem qualquer obstáculo, mas quando li no
    sítio da Internet da Associação Brasileira de Dermatologia que usar maquiagem ajuda na
    orgulho, fiquei mais aliviada.

Leave a Reply to www.Ballonteam-luftschloss.de Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>