Comment conserver les variables JavaScript après une actualisation de page ?

Comment les variables JavaScript peuvent-elles persister après l'actualisation de la page ?

La possibilité de conserver la valeur des variables JavaScript même après l'actualisation d'une page est une pratique courante exigence en développement web. Voyons comment y parvenir à l'aide des mécanismes de stockage du navigateur.

Comprendre le stockage du navigateur

Il existe deux principaux mécanismes de stockage du navigateur qui peuvent être utilisés :

• window.localStorage : Stockage persistant qui survit aux redémarrages du navigateur et s'applique au site Web entier.
• window.sessionStorage : Stockage temporaire qui dure aussi longtemps que la session du navigateur reste ouverte.

Stockage et récupération de variables

Pour définir une variable dans le stockage local, use :

localStorage.setItem("variableName", value);

Pour récupérer la valeur de la variable après l'actualisation de la page :

var retrievedValue = localStorage.getItem("variableName");

sessionStorage suit le même modèle, mais ses données sont effacées une fois la session du navigateur terminée.

Considérations supplémentaires

• Seules les valeurs de chaîne peuvent être stockées directement dans le navigateur stockage. Utilisez JSON.stringify() pour stocker des types de données plus complexes.
• Il existe des limitations de taille imposées par les navigateurs. Consultez la documentation du navigateur pour plus de détails.
• Il est recommandé de supprimer les mécanismes de stockage à l'aide d'une bibliothèque personnalisée ou d'en utiliser une existante. Cela simplifie la gestion des données quel que soit le type de stockage.

Ressources

• [Stockage du navigateur 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!