Le stockage de données avec JavaScript

Le module fs de Node.js

• Node.js fournit un module fs permettant de consulter et réaliser des manipulations sur le système de fichiers.
• Ce module est utilisable pour la réalisation de scripts ou serveurs Node.js.
• Il ne peut être utilisé pour des applications web côté client (s'exécutant sur un navigateur), le navigateur interdisant tout accès au système de fichier local.

Le stockage de données

Une application JavaScript peut stocker des données localement en utilisant différentes techniques :

• les cookies : il s'agit de couples clé-valeur de petite taille stockés par le navigateur localement pour un site donné. Ils sont systématiquement envoyés au serveur lors d'une requête HTTP (en-tête Cookie) et permettent de pister l'internaute depuis le serveur pour mettre en œuvre un mécanisme de session. Ils sont généralement utilisés uniquement pour conserver des identifiants de session ou des préférences (exemple : langue, devise sur un site marchand...) mais pas pour stocker des données de travail.
• l'API LocalStorage : elle permet un stockage de couples clé-valeur en local pour des données de travail ce qui est utile pour rendre l'application utilisable en mode hors-ligne.
• l'API WebSQL : elle est dépréciée (non standardisée) et repose sur la base SQLite ; elle permet de réaliser des requêtes SQL
• l'API IndexedDB : elle permet de stocker des couples clé-objet, les objets stockés pouvant être de grande taille ; elle propose des appels asynchrones contrairement à LocalStorage qui est synchrone. IndexedDB supporte les transactions ainsi que des index.

Utilisation de cookies

Nous présentons les pricipales opérations sur les cookies (réalisées sur l'object document.cookie):

• Création d'un nouveau cookie pour le site courant : document.cookie = "cle1=valeur1"
• Il est possible d'ajouter un cookie pour une autre clé (sans que cela supprime le cookie pour cle1) : document.cookie = "cle2=valeur2
• On peut supprimer un cookie en indiquant pour la clé une expiration dans le passé : document.cookie = "cle1=; expires=Thu, 01 Jan 1970 00:00:00 GMT"
• On peut récupérer la valeur de tous les cookies (couples de clé-valeur séparés par des ;) an accédant en lecture à document.cookie

à propos de la sécurité des cookies

Les cookies servant usuellement à stocker des identifiants de session, les cookies d'un site X ne doivent pas être récupérables par un site Y (risque de vol de session). Une page d'un site de domaine X ne peut lire les cookies que de ce domaine ; néanmoins si un attaquant parvient à insérer du code JavaScript dans la page du site X (attaque de type Cross Site Scripting dite XSS), il peut parvenir à communiquer le contenu d'un cookie vers un site externe. Les données affichées sur une page provenant d'utilisateurs doivent donc ne pas contenir de code JavaScript. On pourra se reporter sur cette page pour un exemple illustratif.

Utilisation de LocalStorage avec window.localStorage

L'API LocalStorage est d'usage synchrone : les appels retournent après avoir écrit ou lu une entrée (ce qui peut être potentiellement long pour des valeurs de grande taille). D'autre part il n'est possible de stocker que des chaînes de caractères ; les données d'autre nature doivent être systématiquement sérialisées/désérialisées.

Les opérations supportées sont :

1. L'écriture d'une entrée : window.localStorage.setItem("cle1", "valeur1")
2. La lecture de la valeur associée à une clé : let v = window.localStorage.getItem("cle1") (retourne null si l'entrée n'est pas définie)
3. La suppression d'une entrée : window.localStorage.removeItem("cle1")
4. La récupération du nombre d'entrées dans l'espace de stockage : let l = window.localStorage.length
5. La récupération de la clé d'indice i : let k = window.localStorage.getItem(i)
6. L'effacement de toutes les entrées : window.localStorage.clear()

Il existe également l'objet window.sessionStorage qui s'utilise de la même façon mais offre un espace de stockage temporaire qui sera purgé lors de la fermeture du navigateur.

Pour stocker facilement un objet, on utilisera JSON.stringify(obj) pour transformer l'objet en chaîne (sérialisation) et JSON.parse(s) pour l'opération inverse (désérialisation). Voici un exemple :

let obj = {"1": "un", "2": "deux", "a": [1,2,3]};
window.localStorage.setItem("obj", JSON.stringify(obj));
let obj2 = JSON.parse(window.localStorage.getItem("obj"));

Utilisation de IndexedDB

A venir très bientôt...