Les contenus du cours BRE03 Web Dev Course © 2024 par Mari Doucet sont sous licence CC BY-NC-SA 4.0
JavaScript est un langage qui doit beaucoup échanger avec d’autres. À l’origine, il n’y a pas de développement back-end en JS et il devait donc échanger avec toute une série de langages back-end :
qui ont chacun leur logique propre, pas toujours compatible avec celle de JavaScript (PHP et Java sont des langages typés par exemple). Pour que tous ces langages puissent communiquer un a créé un format universel de représentation des données basé sur la syntaxe de JavaScript : le JSON (JavaScript Object Notation).
Ce même format nous est très utile pour stocker des données dans le navigateur : en effet, nous ne pouvons stocker que des chaines de caractères, et le format JSON transforme des données complexes (des objets) en chaines de caractères.
let user = {
firstName : "Mari",
lastName : "Doucet",
grades : [13, 14, 11]
};
"{\"firstName\":\"Mari\",\"lastName\":\"Doucet\",\"grades\":[13,14,11]}"
Le format JSON est une transcription en chaine de caractère avec les caractères spéciaux encodé d’un objet JavaScript.
Dans pratiquement tous les langages, il existe des moyens de fabriquer du JSON à partir d’une donnée et des moyens de lire du JSON et d’en faire une donnée. Le fait qu’il ne prenne qu’une chaine de caractère permet d’alléger le format ce qui le rend idéal pour communiquer à travers des réseaux sans monopoliser la bande-passante.
Pour transformer un objet en chaîne de caractère JSON :
let user = {
firstName : "Mari",
lastName : "Doucet",
grades : [13, 11, 12]
};
JSON.stringify(user);
Pour transformer du JSON en variable JavaScript :
let jsonUser = "{\"firstName\":\"Mari\",\"lastName\":\"Doucet\",\"grades\":[13,14,11]}";
let user = JSON.parse(jsonUser);
L’un des soucis que l’on rencontre régulièrement en JavaScript c’est de ne pas pouvoir sauvegarder ses données. On peut faire tous les traitements les plus complexes, si la page est rechargée : tout est perdu.
Une solution à ce problème est proposée grâce à deux modes de stockage de données dans le navigateur : localStorage et sessionStorage.
Il s’agit d’un petit système clé : valeur qui peut stocker des chaines de caractères (d’où l’usage de JSON pour stocker).
💡 C’est quoi la différence ? localStorage reste jusqu’à ce que le cache navigateur soit vidé manuellement, sessionStorage jusqu’à ce que l’onglet en cours soit fermé.
Pour stocker une donnée dans le localStorage :
localStorage.setItem("firstName", "Mari");
Pour récupérer une donnée depuis le localStorage :
let data = localStorage.getItem("firstName");
Pour supprimer une donnée dans le localStorage :
localStorage.removeItem("firstName");
La syntaxe pour sessionStorage est très similaire :
Pour stocker une donnée dans le sessionStorage :
sessionStorage.setItem("firstName", "Mari");
Pour récupérer une donnée depuis le sessionStorage :
let data = sessionStorage.getItem("firstName");
Pour supprimer une donnée dans le sessionStorage :
sessionStorage.removeItem("firstName");