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

Maintenir les valeurs des variables JS après l'actualisation de la page

La conservation des valeurs des variables JavaScript lors des actualisations de page est essentielle pour les applications Web dynamiques et la préservation des informations spécifiques à l'utilisateur. . Pour y parvenir, nous devons exploiter des mécanismes de stockage Web qui conservent les données même lorsque la page est rechargée.

Un outil puissant est localStorage, qui vous permet de stocker en permanence des données dans le navigateur pour l'ensemble du site Web. Ceci est avantageux si vous souhaitez conserver des informations sur plusieurs sessions. Pour définir une valeur à l'aide de localStorage, utilisez :

window.localStorage.setItem("variableName", value);

Pour récupérer la valeur, utilisez simplement :

let retrievedValue = window.localStorage.getItem("variableName");

Alternativement, si vous devez stocker des données qui ne seront conservées que dans le session de navigateur actuelle, vous pouvez utiliser sessionStorage. La syntaxe est similaire à localStorage, mais sessionStorage effacera les données lorsque la fenêtre du navigateur est fermée.

window.sessionStorage.setItem("variableName", value);
let retrievedValue = window.sessionStorage.getItem("variableName");

Il est important de noter que seules les valeurs de chaîne peuvent être stockées directement dans ces mécanismes. Pour stocker d'autres types de données, envisagez d'utiliser JSON.stringify() et JSON.parse() pour la conversion.

Pour des informations plus détaillées et des solutions de contournement pour les navigateurs qui ne prennent pas en charge localStorage, reportez-vous aux ressources suivantes :

• [Stockage DOM de MDN Guide](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage)
• [localStorage](https://developer.mozi lla.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)

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!