JSON

Tout savoir, ou presque, sur l'utilisation du format JSON avec localStorage et sessionStorage.

On vient de voir que localStorage et sessionStorage permettent d'enregistrer des paires clé/valeur dans le navigateur.

Mais lors du stockage, ces valeurs - quelque soit leur type - sont automatiquement converties en String :

Un nombre Number sera converti en String.
Un booléen Boolean sera converti en String.
Un tableau indexé Array sera converti en String.
Un tableau associatif Object sera converti en String.
Une valeur nulle null sera convertie en String.

Mais il existe une solution pour conserver ces types de valeurs ...

Cette solution, c'est de formater la valeur à stocker en JSON.

C'est quoi le JSON ?

Le JSON c'est juste une chaîne de caractères (String)
mais qui permet de contenir tous les types de données souhaités !

Voici maintenant quelques exemples de données, encodées en JSON.

Chaîne de caractères JSON contenant une variable age de type Number valant 38 :

{
    "age": 38
}

illustration représentant un camion symbolisant JSON et transportant une variable de type Number

Chaîne de caractères JSON contenant une variable espion de type Boolean valant true :

{
    "espion": true
}

illustration représentant un camion symbolisant JSON et transportant une variable de type Boolean

Chaîne de caractères JSON contenant un tableau de type Array contenant plusieurs entrées :

[
    "yes",
    "no",
    "ok",
    true,
    18
]

illustration représentant un camion symbolisant JSON et transportant un Array

Chaîne de caractères JSON contenant une variable tableau de type Array contenant plusieurs entrées :

{
    "tableau" [
        "yes",
        "no",
        "ok",
        true,
        18
    ]
}

illustration représentant un camion symbolisant JSON et transportant une variable de type Array

Chaîne de caractères JSON contenant deux variables tableau1 et tableau2 de type Array :

{
    "tableau1" [
        "yes",
        "no",
        "ok",
        true,
        18
    ],
    "tableau2" [
        "oui",
        "non",
        "pourquoi pas",
        false,
        36
    ]
}

illustration représentant un camion symbolisant JSON et transportant deux variables de type Array

Chaîne de caractères JSON contenant une variable lieu de type Null :

{
    "lieu": null
}

illustration représentant un camion symbolisant JSON et transportant une variable de type Null

Chaîne de caractères JSON contenant une variable heros de type Object contenant plusieurs paramètres :

"heros": {
    "nom": "Saint-Clar",
    "prenom": "Bob",
    "age": 38,
    "espion": true,
    "lieu": null
}

illustration représentant un camion symbolisant JSON et transportant une variable de type Object

Pour conclure : le JSON est un contenant
qui nous permet de mettre tout ce qu'on veut dans une simple chaîne de caractères.

Et pour transformer tout ce qu'on veut en JSON, et inversement, on utilise des méthodes natives de JS :

Pour transformer un contenu JS en JSON

JSON.stringify(contenu JS à transformer en JSON)

Pour transformer un contenu JSON en JS

JSON.parse(contenu JSON à transformer en contenu JS)

La suite de cette époustouflante aventure est dans script.js