Que fait la méthode Storage key() en JavaScript

Que Fait La Methode Storage Key En Javascript



JavaScript est livré avec deux types d'objets de stockage 'local' et 'session' qui stockent les données dans le stockage local, c'est-à-dire le navigateur Web. Le ' local ' L'objet de stockage stocke les données du site Web particulier sans date d'expiration alors que le ' session L'objet 'stockage' enregistre les données uniquement pour la session en cours. Lorsque ces objets sont stockés, ils sont facilement accessibles via leurs noms de clé à l'aide du stockage intégré ' clé() ' méthode.

Cet article illustre la méthode de stockage 'key ()' en JavaScript.

Que fait la méthode Storage key() en JavaScript ?

Le ' clé() ” est associée à l'objet Storage qui récupère le nom de clé placé à l'index spécifié. L'objet 'stockage' peut être l'objet ' local ' ou la ' session ' stockage. Il permet aux utilisateurs d'accéder à la fois aux clés de stockage locales et de session.







Syntaxe (pour le stockage local)



stockage local. clé ( indice ) ;

La syntaxe ci-dessus accepte un paramètre ' indice ” qui renvoie le nom de la clé à un index donné.



Syntaxe (pour le stockage de session)





sessionStorage. clé ( indice ) ;

La syntaxe ci-dessus prend également en charge le paramètre 'index' identique au 'localStorage'.

Les deux syntaxes définies ci-dessus renvoient le nom de clé de l'objet de stockage sous forme de chaîne. Mettons en œuvre les deux un par un.



Exemple 1 : Application de la méthode de stockage 'key()' pour récupérer le nom de clé de stockage local spécifié

Cet exemple explique l'implémentation pratique de la méthode de stockage 'key()' pour obtenir le nom de clé de stockage d'index local spécifié.

Code HTML

Tout d'abord, regardez le code HTML donné :

< h2 > Clé de stockage ( ) Méthode en Javascript h2 >

< bouton onclick = 'maFonction()' > Obtenir la clé de stockage local spécifiée bouton >

< identifiant p = 'démo' > p >

Dans l'extrait de code ci-dessus :

  • Spécifiez d'abord un sous-titre via le '

    ' étiqueter.

  • Ensuite, ajoutez un bouton à l'aide du ' ” tag comprenant un “ sur clic « événement pour exécuter la fonction » maFonction() ” sur le bouton cliquez.
  • Enfin, créez un paragraphe vide via le '

    ” Tag auquel on peut facilement accéder via son identifiant “demo” qui lui est attribué.

Code Javascript

Ensuite, continuez avec le code ci-dessous :

< scénario >

stockage local. setItem ( 'Site Internet' , 'Linux' ) ;

stockage local. setItem ( 'Premier Tutoriel' , 'HTML' ) ;

stockage local. setItem ( 'Deuxième tutoriel' , 'JavaScript' ) ;

fonction maFonction ( ) {

il y a x = stockage local. clé ( 1 ) ;

document. getElementById ( 'démo' ) . innerHTML = X ;

}

scénario >

Dans le bloc de code ci-dessus :

  • Le ' stockage local ' la propriété est associée à la ' setItem() ” pour définir les éléments de stockage local spécifiés.
  • Ensuite, la fonction nommée ' maFonction() ' est défini.
  • Dans sa définition, le « clé() ” méthode est associée à la “ stockage local ” propriété pour obtenir le nom de clé du premier index.
  • Après cela, le « document.getElementById() ” est appliquée pour accéder au paragraphe vide en utilisant son identifiant “demo” pour l'ajouter avec la clé d'élément de stockage local “name”.

Sortir

Comme on le voit, la sortie affiche le nom de clé de l'élément de stockage local .e. 'SecondTutorial' au premier index en suivant l'ordre alphabétique lors du clic sur le bouton.

Exemple 2 : Application de la méthode de stockage 'key()' pour obtenir le nom de clé de stockage de session spécifié

Dans cet exemple, la méthode Storage 'key()' renvoie le nom de la clé de stockage de session avec un index particulier.

Code HTML

Tout d'abord, parcourez le code HTML suivant :

< h2 > Clé de stockage ( ) Méthode en Javascript h2 >

< bouton onclick = 'maFonction()' > Obtenir la clé de stockage de session spécifiée bouton >

< identifiant p = 'démo' > p >

Le code ci-dessus est identique à l'exemple 1 mais avec quelques mises à jour dans le contenu HTML.

Code Javascript

Ensuite, passez au code suivant :

< scénario >

sessionStorage. setItem ( 'Site Internet' , 'Linux' ) ;

sessionStorage. setItem ( 'D'abord' , 'HTML' ) ;

sessionStorage. setItem ( 'Deuxième' , 'JavaScript' ) ;

fonction maFonction ( ) {

il y a x = sessionStorage. clé ( 2 ) ;

document. getElementById ( 'démo' ) . innerHTML = X ;

}

scénario >

Ici, les éléments de stockage de session sont créés en utilisant le ' sessionStorage ” propriété puis le “ clé() ” est appliquée pour obtenir le nom de clé de stockage de session d'index spécifié du deuxième index.

Sortir

Dans ce résultat, la méthode 'key()' affichait le nom de la clé de l'élément de stockage de session stocké au deuxième index. Le processus de recherche du nom de la clé de stockage suit l'ordre alphabétique qui commence la recherche à partir du ' 0 ” indice.

Conclusion

JavaScript fournit le stockage ' clé() ” pour obtenir le nom de la clé avec l'index particulier de la “ local ' et le ' session ” objets de stockage. Il recherche le nom de clé spécifié dans le stockage, puis affiche son nom dans le DOM (Document Object Model). Il ne nécessite que le paramètre 'index' pour effectuer cette tâche. Cet article a illustré en détail le fonctionnement de la méthode 'key()' de JavaScript Storage.