Comment garder des données sur le téléphone ?
localStorage est un petit espace du navigateur où une page garde des paires clé et valeur, sur l'appareil. Les données y restent après un rechargement ou après la fermeture de l'onglet.
L'espace est limité, il ne contient que du texte, et la personne peut l'effacer. Une bonne application web le sait et s'en protège.
À la fin de cette leçon
Remarque
Je peux garder des données sur l'appareil et dire ce qui peut se perdre.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| localStorage | un espace du navigateur qui garde des paires clé et valeur sur l'appareil | |
| Clé et valeur | un nom et le texte rangé sous ce nom | habitudes et [...] |
| Quota | la taille maximale que le navigateur accorde à un site | |
| Sérialiser | transformer une liste ou un objet en texte, par exemple en JSON | |
| Origine | l'adresse d'un site : seul ce site lit ses propres données | |
| Données du site | tout ce que le navigateur garde pour un site, que la personne peut effacer |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
localStorage range du texte sous une clé
Avec setItem, vous rangez un texte sous un nom. Avec getItem, vous le relisez. Si le nom n'existe pas, getItem donne null.
Seul du texte est accepté. Pour ranger une liste, on la transforme en JSON avec JSON.stringify, puis on la relit avec JSON.parse.
Ranger et relire une liste, ligne par ligne
// Tout est du texte : on convertit la liste en JSON.
const habitudes = [{ texte: "Lire une page", fait: true }];
localStorage.setItem("habitudes", JSON.stringify(habitudes));
// Au chargement suivant : lire, puis convertir en liste.
const texte = localStorage.getItem("habitudes");
const liste = texte ? JSON.parse(texte) : [];
// Quand l'espace est plein, setItem lève une erreur.
try {
localStorage.setItem("gros", "x".repeat(10000000));
} catch (erreur) {
console.log("espace plein :", erreur.name);
}Exemple : que devient la donnée ?
| Situation | La donnée est-elle encore là ? |
|---|---|
| Après un rechargement de la page | oui |
| Après la fermeture et la réouverture du navigateur | oui |
| Sans réseau | oui |
| Sur un autre appareil | non, elle reste sur celui-ci |
| Après « effacer les données du site » | non |
| Dans une fenêtre de navigation privée, une fois fermée | non |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Voir où l'application du laboratoire utilise localStorage
L'application de suivi d'habitudes garde sa liste sous la clé habits. Le premier Run compte les lignes de son script qui contiennent le mot localStorage. Il doit afficher 3 : un commentaire, une lecture et une écriture.
Le second calcule en Python la longueur du texte JSON d'une seule habitude. Il doit afficher 41 caractères.
Compter les usages de localStorage
docker exec jupyter grep -c localStorage app/app.jsAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Mesurer le JSON d'une habitude
docker exec jupyter python3 -c "import json; print(len(json.dumps([{'text': 'Read one page', 'done': True}])))"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Exemple : combien d'habitudes tiennent dans le quota ?
| Contenu | Taille approximative | Part d'un quota de cinq millions de caractères |
|---|---|---|
| Une habitude | 41 caractères | presque rien |
| 100 habitudes | environ 4 100 caractères | moins d'un millième |
| Une photo convertie en texte | souvent plus d'un million de caractères | une grande part : à éviter |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une erreur fréquente
Attention
Beaucoup pensent que les données du navigateur sont une sauvegarde sûre. Faux : la personne peut les effacer, le navigateur peut les nettoyer et elles ne suivent pas sur un autre appareil. Ce qui compte vraiment se garde aussi sur un serveur.
Quand localStorage ne suffit plus
localStorage est simple mais petit, et il bloque la page pendant qu'il travaille. Pour beaucoup de données, les navigateurs offrent une base plus grande nommée IndexedDB. Le cache d'un service worker garde, lui, des fichiers.
N'y rangez jamais un mot de passe : tout script du même site peut le lire.