Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. JavaScript pour l'intégrateur web
  3. L'API Web Storage
Extrait - JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
Extraits du livre
JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
2 avis
Revenir à la page d'achat du livre

L'API Web Storage

Le stockage des données dans le navigateur

Dans le développement de vos sites web, vous pouvez avoir besoin de données qui soient accessibles et utilisables tout le temps. Nous pouvons bien sûr utiliser des champs de saisie pour que les utilisateurs puissent y saisir des informations, et par la suite nous pouvons accéder à ces informations. Mais le problème est que ces données ne sont plus exploitables une fois que la fenêtre ou l’onglet du navigateur sont fermés. Nous pouvons aussi recourir à des cookies, mais leur utilisation n’est pas très souple et ils sont limités en taille de stockage à 4 ko.

Pour avoir des données persistantes, le W3C nous fournit une API dédiée : le Web Storage : https://www.w3.org/TR/webstorage/

Web Storage nous met à disposition deux systèmes, deux interfaces (pour reprendre la terminologie officielle) pour stocker les données :

  • sessionStorage permet de ne stocker les données que durant la session de la fenêtre ou de l’onglet du navigateur. Dès que vous fermez la fenêtre ou l’onglet, les données sont supprimées, donc elles ne sont plus accessibles.

  • localStorage permet de stocker les données, même si vous fermez la fenêtre ou l’onglet et même si vous quittez le navigateur. Les données sont stockées...

Les propriétés de Web Storage

1. Les interfaces

Nous venons de le voir, nous pouvons stocker des informations de manière temporaire avec sessionStorage et de manière permanente avec localStorage. Toutes les propriétés fonctionnent de la même manière avec ces deux systèmes (ces deux interfaces, pour reprendre la terminologie officielle).

L’exemple à télécharger est dans le dossier Chapitre-09-B/exemple-01.html.

2. Ajouter une donnée

Pour ajouter une donnée en stockage local, nous devons utiliser setItem(key, value). Le premier argument est le nom de cette donnée. Le deuxième argument est la valeur de cette donnée.

Voici un exemple simple :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <script> 
            localStorage.setItem("Nom","Aubry"); 
        </script> 
    </body> 
</html>
 

Ce script ne contient qu’une seule ligne : la création d’un enregistrement local d’une donnée nommée Nom et ayant pour valeur Aubry.

 Affichez cette...

La source des données

1. Saisir des données

Dans les exemples précédents, les données stockées localement étaient directement saisies dans les scripts. L’objectif était d’appréhender les fonctions natives de Web Storage. Bien sûr, dans la réalité des développements, cela n’est pas envisageable.

Dans l’exemple qui va suivre, nous allons utiliser un groupe de boutons radio et deux champs pour obtenir des données. L’utilisateur va saisir des informations que nous allons ensuite stocker localement.

Voici la structure de la page :


<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <h3>Données Saisies</h3> 
        <fieldset> 
            <legend>Civilité</legend> 
            <p> 
                <input type="radio" id="monsieur" value="Monsieur" 
name="civilite" /> 
                <label for="monsieur">Monsieur</label> 
            </p> 
             
            <p> 
                <input type="radio" id="madame" value="Madame" 
name="civilite" /> 
                <label for="madame">Madame</label> 
            </p> 
             
            <p> 
                <input type="radio" id="mademoiselle" 
value="Mademoiselle" name="civilite" /> 
                <label for="mademoiselle">Mademoiselle</label> 
            </p> ...