Table des matières
Lorsque nous travaillons avec des pages Web, nous devons parfois utiliser des données qui persistent pendant la navigation de l'utilisateur, mais nous ne voulons pas ou ne pouvons pas utiliser de bases de données, nous pouvons donc utiliser le stockage dans le navigateur.Stockage du navigateur
Le navigateur nous permet de stocker une quantité considérable de données avec les différents outils qu'il nous donne. HTML5, la décision d'utiliser l'un ou l'autre passe par la définition de ce que l'on veut faire.
Parmi les différents types de stockage que nous pouvons utiliser, nous soulignerons le stockage local, avec ce type de stockage nous pouvons enregistrer différentes associations clé-valeur avec lequel nous pouvons maintenir une persistance des données utilisateur sur votre ordinateur local à partir duquel vous accédez à la page HTML5.
Stockage local
Pour utiliser le stockage local nous dépendons de la propriété mondiale stockage local, a déclaré la propriété que nous renvoie un objet Storage dans laquelle nous aurons les différentes associations clé - valeur que nous avons évoquées plus haut.
Lorsque nous déciderons de travailler avec ce type de stockage, nous pourrons compter sur ses différentes méthodes pour pouvoir construire les fonctionnalités dont nous avons besoin, pour cette raison nous devons les connaître, voyons ci-dessous les méthodes que nous avons dans ce type de stockage local.
- dégager (): Cette méthode nous permet de nettoyer toutes les associations stockées dans notre objet.
- obtenir l'article (): Il permet d'obtenir la valeur de l'association à l'aide d'une clé que l'on passe en paramètre.
- clé (): Il nous permet d'obtenir la clé de l'association en utilisant votre position pour celle-ci.
- longueur: Il indique la quantité d'éléments clé - valeur que nous avons stockés pour le moment.
- retirer l'objet (): Au lieu d'effacer tous les éléments avec clear(), avec cette méthode, nous pouvons supprimer des éléments spécifiques en utilisant leur clé comme identifiant.
- setItem (,): Cette méthode nous permet d'ajouter une nouvelle association ou d'en mettre une à jour si la clé que nous plaçons existe déjà.
- []: Il permet d'accéder au contenu d'une des associations sous forme de tableau.
ExempleClé:Valeur:Ajouter EffacerIl y a des éléments
| Éléments: | - |
|---|
Dans cet exemple, nous avons construit une fonctionnalité qui nous permet d'écrire des valeurs dans des champs de type de texte de saisie puis via des fonctions pour pouvoir stocker ces valeurs localement.
Voyons à quoi cela ressemble dans notre navigateur :
