Exercices JSON et Storage

Exercice 0 : préparation du repository

Créez un repository public avec un README sur GitHub, appelez-le bre05-js-j7
Clonez-le dans le dossier sites/js de votre IDE.
Dans le dossier bre05-js-j7 créez un dossier json-storage

Exercice 1

Dans le dossier json-storage, créez un dossier exercice-1. Dans le dossier exercice-1 créez un fichier index.html et un fichier index.js.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Exercice 1 JSON et Storage</title>
    </head>
    <body>

    <script type="application/javascript" src="index.js"></script>
    </body>
</html>

document.addEventListener("DOMContentLoaded", function(){
    let name = "Harry Bow";
});

Consignes

Étape 1.1 :

Commencez par faire en sorte de stocker la variable name dans le localStorage et le sessionStorage.

Étape 1.2 :

Dans les outils de développement de votre navigateur, vous pouvez visualiser l'état du localStorage et sessionStorage :

Chrome

Firefox

Étape 1.3

Rechargez votre page : votre donnée est toujours en place dans les deux storage.

Étape 1.4 :

Fermez votre onglet puis ouvrez-en un nouveau sur la même page : seul le localStorage est encore là.

Exercice 2 : stocker et charger des données simples

Dans le dossier json-storage, créez un dossier exercice-2. Dans le dossier exercice-2 créez un fichier index.html et un fichier index.js.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Exercice 2 JSON et Storage</title>
    </head>
    <body>

    <script type="application/javascript" src="index.js"></script>
    </body>
</html>

window.addEventListener("DOMContentLoaded", function(){
    
});

Faites en sorte que si la donnée username n'existe pas dans le sessionStorage, vous demandiez à l'utilisateur/utilisatrice de saisir son nom via un window.prompt, ensuite, sauvegardez ce nom dans le sessionStorage.

Si la valeur username existe déjà, affichez là dans un window.alert.

Démo exercice 2

Exercice 3 : transformer un objet en JSON

Dans le dossier json-storage, créez un dossier exercice-3. Dans le dossier exercice-3 créez un fichier index.html et un fichier index.js.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Exercice 3 JSON et Storage</title>
    </head>
    <body>

    <script type="application/javascript" src="index.js"></script>
    </body>
</html>

let data = {
    firstName : "Harry",
    lastName : "Bow",
    motto : "C'est beau la vie !"
};

let str = "{\"firstName\":\"Colonel\",\"lastName\":\"Sanders\",\"motto\":\"Il est bon mon poulet\"}";

document.addEventListener("DOMContentLoaded", function(){
    
});

Étape 3.1

Faites en sorte de transformer l'objet data en une chaîne de caractère au format JSON, faites ensuite un console.logde cete chaine de caractères.

Étape 3.2

Faites en sorte de transformer la chaine de caractère str qui est au format JSON en objet JavaScript, et faites un console.log de cet objet

Exercice 4 : stocker du JSON dans le storage

Dans le dossier json-storage, créez un dossier exercice-4. Dans le dossier exercice-4 créez un fichier index.html et un fichier index.js.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Exercice 4 JSON et Storage</title>
    </head>
    <body>

    <script type="application/javascript" src="index.js"></script>
    </body>
</html>

let user = {
    firstName : "Harry",
    lastName : "Bow",
    motto : "C'est beau la vie !"
};

document.addEventListener("DOMContentLoaded", function(){
    
});

Faites en sorte que votre script vérifie si la donnée user existe dans le sessionStorage.

Si elle n'existe pas, transformer la variable user en string JSON et stockez là dans le sessionStorage.

Si elle existe, récupérez la string dans le sessionStorage, transformez-la en objet JavaScript et faites un console.log de l'objet que vous venez de créer.

14 January 2026