Angular : localStorage et sessionStorage
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille
Chercheur en Programmation par contrainte (IA)
Ingénieur en Génie logiciel
[email protected]
20 Décembre 2017, CDI Lyon 2017 1/6
localStorage et sessionStorage
localStorage et sessionStorage
deux propriétés permettant d’accéder respectivement aux deux
objets Storage et Session
localStorage : stocke les données sans date d’expiration
sessionStorage : stocke les données pour une connexion (les
données sont perdues lorsque l’onglet du navigateur est fermé)
20 Décembre 2017, CDI Lyon 2017 2/6
localStorage et sessionStorage
localStorage et sessionStorage
deux propriétés permettant d’accéder respectivement aux deux
objets Storage et Session
localStorage : stocke les données sans date d’expiration
sessionStorage : stocke les données pour une connexion (les
données sont perdues lorsque l’onglet du navigateur est fermé)
Dans les exemples
Que localStorage sera considéré
Même syntaxe pour sessionStorage
20 Décembre 2017, CDI Lyon 2017 2/6
localStorage et sessionStorage
Pour créer ou mettre à jour une variable session
localStorage.setItem(’nom’, ’wick’);
20 Décembre 2017, CDI Lyon 2017 3/6
localStorage et sessionStorage
Pour créer ou mettre à jour une variable session
localStorage.setItem(’nom’, ’wick’);
On peut aussi faire
localStorage[’nom’] = ’wick’;
20 Décembre 2017, CDI Lyon 2017 3/6
localStorage et sessionStorage
Pour créer ou mettre à jour une variable session
localStorage.setItem(’nom’, ’wick’);
On peut aussi faire
localStorage[’nom’] = ’wick’;
Ou encore
localStorage.nom = ’wick’;
20 Décembre 2017, CDI Lyon 2017 3/6
localStorage et sessionStorage
Pour récupérer une variable de localStorage
let nom = localStorage.getItem(’nom’);
20 Décembre 2017, CDI Lyon 2017 4/6
localStorage et sessionStorage
Pour récupérer une variable de localStorage
let nom = localStorage.getItem(’nom’);
Pour supprimer une variable de localStorage
localStorage.removeItem(’nom’);
20 Décembre 2017, CDI Lyon 2017 4/6
localStorage et sessionStorage
Pour récupérer une variable de localStorage
let nom = localStorage.getItem(’nom’);
Pour supprimer une variable de localStorage
localStorage.removeItem(’nom’);
Pour vider localStorage
localStorage.clear();
20 Décembre 2017, CDI Lyon 2017 4/6
localStorage et sessionStorage
Pour connaı̂tre le nombre de variables session
localStorage.length
20 Décembre 2017, CDI Lyon 2017 5/6
localStorage et sessionStorage
Pour connaı̂tre le nombre de variables session
localStorage.length
Pour stocker un objet dans localStorage
let perso = { nom: ’wick’, prenom: ’john’ };
localStorage.setItem("person", JSON.stringify(perso)
);
20 Décembre 2017, CDI Lyon 2017 5/6
localStorage et sessionStorage
Pour connaı̂tre le nombre de variables session
localStorage.length
Pour stocker un objet dans localStorage
let perso = { nom: ’wick’, prenom: ’john’ };
localStorage.setItem("person", JSON.stringify(perso)
);
Pour récupérer un objet de localStorage
let p = JSON.parse(localStorage.getItem("person"));
20 Décembre 2017, CDI Lyon 2017 5/6
localStorage et sessionStorage
Pour tester la compatibilité de localStorage avec le navigateur
if (window.localStorage) {
...
}
20 Décembre 2017, CDI Lyon 2017 6/6
localStorage et sessionStorage
Pour tester la compatibilité de localStorage avec le navigateur
if (window.localStorage) {
...
}
Pour itérer sur localStorage
for (let i = 0; i < localStorage.length; i++){
let clef = localStorage.key(i);
let valeur = localStorage.getItem(clef);
console.log(clef, valeur);
}
20 Décembre 2017, CDI Lyon 2017 6/6
