Les données locales

Un stockage simple

1. Le stockage local

La méthode classique pour sauvegarder des données des utilisateurs consiste à les enregistrer sur le serveur. Ce n’est pas toujours idéal, en particulier si la WebApp risque de fonctionner en mode hors connexion. Et en plus, cela provoque des communications client-serveur inutiles.

Stocker les données en local est donc une alternative fort pratique, surtout lorsqu’il s’agit d’une WebApp. La plupart des préférences utilisateur peuvent être stockées en local sans que cela n’influe sur le comportement de la WebApp. Elle sera même plus réactive puisqu’il ne sera pas nécessaire d’effectuer des transactions réseau.

Longtemps, les cookies ont été le seul moyen de stocker des données en local. Mais ils souffrent d’une mauvaise réputation, à cause des régies de publicité qui les utilisent pour suivre l’activité des internautes. De ce fait, de nombreux utilisateurs les désactivent, ce qui perturbe le fonctionnement d’une WebApp.

L’API (interface de programmation) LocalStorage (stockage local) a été créée pour remédier à ces inconvénients. Les données qui y sont stockées restent en local, contrairement aux cookies qui sont envoyés vers le serveur à...

Une base de données locales

1. indexedDB

Pour stocker de grosses quantités de données en local, les navigateurs récents permettent d’utiliser l’API indexedDB. Elle nécessite l’utilisation des « web workers » JavaScripts. L’API web workers est un système de gestion multi-thread intégré au navigateur. Il permet donc de faire exécuter en arrière-plan des parties du programme JavaScript sans bloquer le programme principal.

L’API web workers n’est pas aisée à mettre en œuvre, et l’API indexedDB n’est pas vraiment intuitive non plus. C’est pour cela que des librairies intermédiaires ont été créés par des passionnés. Elles offrent un accès simplifié à indexedDB, ce qui permet une prise en main rapide. Parmi toutes celles disponibles, la librairie JsStore s’efforce de proposer un langage de requête qui se rapproche de la syntaxe SQL, ce qui ne dépaysera pas les habitués.

Cette librairie peut être téléchargée dans sa version la plus récente sur le site de l’auteur : jsstore.net. Elle se compose de deux éléments : le fichier jsstore.js qui contient les points d’entrée de l’API ; et le fichier jsstore.worker.js qui contient tout le code de la librairie.

Le premier élément est incorporé dans la section head de la WebApp, comme n’importe quelle autre librairie.

<script src="lib/jsStore/jsstore.js"></script>

L’autre élément est déclaré dans le code JavaScript lors de la création du web worker. On obtient en retour un objet connection, qui permet les accès ultérieurs à la librairie JsStore.

connection = new JsStore.Instance 
             (new Worker('lib/jsStore/jsstore.worker.js'))

De nombreuses méthodes sont disponibles à l’utilisateur, mais il n’en faut que quelques-unes pour mener à bien ce premier essai.

Voici une liste de fonctions mise à disposition par cette API.

await connection.initDb(base)

Cette fonction initialise l’accès à une base de données. La valeur de retour...

Un panier d’achats

1. Un exemple pratique

Sans plus attendre, la classe Base va être mise à profit pour gérer un panier d’achats sur un site de commerce en ligne. En laissant la gestion du panier côté client, c’est une quantité importante de transactions réseau et de stockage en ligne qui sont évités.

L’en-tête est un peu plus conséquent que d’habitude. Ce n’est étonnant puisqu’il y a quatre fichiers JavaScript à importer : la librairie jQuery, la librairie JsStore, ainsi que la classe pour gérer les formulaires et celle pour gérer les tables :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>PANIER</title> 
<script src="lib/jquery/jquery-3.4.1.min.js"></script> 
<script src="lib/jsStore/jsstore.js"></script> 
<script src="Form.js"></script> 
<script src="Base.js"></script>

On effectue ensuite la définition de la feuille de style.

<style> 
form {margin-bottom:2em} 
div.block {display:flex} 
div.block div{margin:0.5em; height:2em} 
div.block div:first-of-type{width:10em; text-align:right; line- 
eight:2em} 
table {border-collapse: collapse; margin-top:1em} 
table th {background-color: #CCC; padding: 0.25em} 
table td {border:1px solid #999; padding: 0.25em} 
div.btn {font-family:sans-serif; color:#FFF; background- 
color:#999; width:1em; height:1em; text-align: 
center;line-height: 1em} 
div.btn:hover {cursor:pointer} 
td.prix, td.total {text-align:right} 
td.qte {text-align:center} 
td.somme {text-align:right; font-weight: bold} 
td.btn {border-width:0} 
</style> 
</head>

Les règles qui commencent par div.block concernent la mise en page du formulaire de saisie d’article. Celle-ci est effectuée au moyen des flexbox. La règle table, quant à elle, se charge d’afficher le contenu du panier. Dès qu’il s’agit d’afficher des données sous forme d’un tableau, table reste encore le meilleur choix. Après avoir...