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

Préserver les variables JavaScript au-delà de l'actualisation de la page

En JavaScript, il est possible de modifier les variables de manière dynamique via des clics sur des boutons ou d'autres événements. Cependant, par défaut, ces modifications sont perdues lors de l'actualisation de la page. Comment pouvons-nous garantir que les variables conservent leurs valeurs même après avoir actualisé la page ?

Stockage local et de session

Le stockage persistant en JavaScript est obtenu grâce à deux méthodes : window.localStorage et window.sessionStorage. Les deux fournissent un moyen de stocker des paires clé-valeur, avec des différences subtiles :

• localStorage : Les données persistent indéfiniment au fil des sessions et des redémarrages du navigateur.
• sessionStorage : Les données ne persistent que pendant la session en cours du navigateur et sont effacées une fois la fenêtre ou l'onglet fermé. fermé.

Stockage des données :

Pour stocker une variable dans un stockage persistant, utilisez setItem() avec la clé et la valeur souhaitées :

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

Récupération des données :

Après l'actualisation de la page, récupérez les données stockées en utilisant getItem() :

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

Cela attribuera la valeur stockée à someVarName, même après l'actualisation de la page.

Surmonter les limitations :

Le stockage local et de session prend uniquement en charge les valeurs de chaîne. Pour stocker des types de données plus complexes, envisagez d'utiliser JSON :

var obj = {
  prop1: "value1",
  prop2: "value2"
};

localStorage.setItem("objKey", JSON.stringify(obj));

Récupérez et analysez les données plus tard :

var obj = JSON.parse(localStorage.getItem("objKey"));

Ressources supplémentaires :

• Stockage du navigateur : https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• LocalStorage : https://developer.mozilla.org/en-US/docs/DOM /Stockage#localStorage

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!