Comment puis-je conserver les valeurs des variables JavaScript après l'actualisation de la page ?

Conservation des valeurs des variables JavaScript lors de l'actualisation de la page

En JavaScript, les variables perdent généralement leurs valeurs lorsque la page est actualisée. Pour surmonter cette limitation, nous pouvons exploiter les méthodes window.localStorage ou window.sessionStorage.

window.localStorage

localStorage nous permet de stocker des paires clé-valeur qui persistent au-delà du redémarrage du navigateur. Cela s'applique à l'ensemble du site Web, pas seulement à une seule page.

Pour définir une variable qui doit persister après une actualisation, utilisez :

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

Pour récupérer la valeur persistante dans n'importe quelle page, utiliser :

var someVarName = localStorage.getItem("someVarKey");

window.sessionStorage

sessionStorage fonctionne de la même manière que localStorage mais conserve les données uniquement tant que l'onglet du navigateur reste ouvert. Il est utile pour stocker temporairement des informations spécifiques à une session.

Pour utiliser sessionStorage, remplacez localStorage par sessionStorage dans les exemples ci-dessus.

Considérations :

• localStorage et sessionStorage ne peuvent stocker que des chaînes. Pour enregistrer des valeurs autres que des chaînes, utilisez JSON.stringify et JSON.parse.
• Il est recommandé d'utiliser une bibliothèque ou de créer votre propre abstraction pour faciliter l'enregistrement de divers types de données.
• Ces méthodes fournissent au site -persistance à l'échelle. Utilisez-les judicieusement pour éviter l'encombrement et les conflits potentiels.

Références :

• [DOM Stockage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage)
• [localStorage](https://developer.moz illa.org/en-US/docs/DOM/Storage#localStorage)
• [JSON](https://developer.mozilla.org/en-US/docs/JSON)
• [Navigateur Compatibilité de stockage](http://caniuse.com/namevalue-storage)
• [Stockage d'objets dans HTML5 localStorage](https://www.html5rocks.com/en/tutorials/storage/using-the- API de stockage/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!