Stockage local de données

Présentation générale des solutions

Nous avons vu, dans le chapitre précédent, comment stocker de petites quantités d’informations dans des cookies (4 Ko maximum).

Il existe deux solutions, dites de Web Storage, alternatives à l’utilisation des cookies :

le stockage de session,
le stockage local.

Comme pour les cookies, le stockage avec ces deux interfaces nommées respectivement sessionStorage et localStorage, se fait du côté navigateur. Il ne faut donc pas confondre ces deux techniques avec un stockage distant en base de données. Nous verrons d’ailleurs dans le cadre du prochain chapitre comment mettre en œuvre ce type de solution en utilisant le protocole SOAP (Simple Object Access Protocol), une librairie PHP dédiée NuSOAP et le système de gestion de base de données MySQL.

Le Web Storage, encore appelé DOM Storage, est apparu avec HTML5. Ce mode de stockage est désormais accepté par la grande majorité des navigateurs.

L’avantage principal du Web Storage par rapport aux cookies est la possibilité de mémoriser des informations en plus grand volume (5 Mo maximum). Par ailleurs, contrairement à ce qui se passe pour les cookies, les interfaces sessionStorage et localStorage ne requièrent pas de trafic HTTP sur le réseau. Rappelons que les cookies sont inscrits...

Mise en œuvre du Web Storage au travers d’exemples

Dans la mesure où les méthodes associées à sessionStorage et à localStorage sont identiques, les deux exemples utilisent tous les deux localStorage.

1. Exemple 1 : Stockage par localStorage de chaînes de caractères

Dans ce premier exemple, l’objectif va être d’étudier les possibilités offertes par localStorage dans la gestion (création, accès, suppression) d’informations de type chaînes de caractères.

Script complet

Le code source du script est reproduit intégralement ci-après :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
 
<!-- 
NOM DU SCRIPT : LOCAL_STORAGE_01.htm 
REALISATION INFORMATIQUE : Christian VIGOUROUX 
DATE DE CREATION : 15/10/2018 
DATE DE DERNIERE MODIFICATION : 15/10/2018 
OBJET : Stockage avec utilisation de localStorage 
--> 
 
<!-- Début script HTML --> 
<html> 
 
    <!-- Début en-tête script HTML --> 
    <head> 
 
        <!-- Balise meta --> 
        <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8" /> 
 
        <!-- Titre du script HTML --> 
        <title>LOCAL_STORAGE_01</title> 
 
        <!-- Début script JavaScript --> 
        <script type='text/javascript'> 
 
            /* Déclarations de variables communes 
            à toutes les fonctions */ 
            var intitule; 
            var nomPersonne; 
            var prenomPersonne; 
            var mailPersonne; 
 
            /* Fonction ecrireLocalStorage */ 
            function ecrireLocalStorage() 
            { ...