Comment obtenir la variable JS pour conserver la valeur après l'actualisation de la page? [dupliquer]
Cette question a déjà une réponse ici:
Est - il possible de changer définitivement une variable javascript? Comme dans, si je définis la variable X et que je la rends égale à 1. Puis onClick d'un bouton changer cette variable à 2. Comment puis-je obtenir que cette variable reste à 2 lors de l'actualisation de la page?
4 réponses
, C'est possible avec window.localStorage ou window.sessionStorage. La différence est que sessionStorage dure aussi longtemps que le navigateur reste ouvert, localStorage survit passé le redémarrage du navigateur. La persistance s'applique à l'ensemble du site Web pas seulement une seule page de celui-ci.
Lorsque vous devez définir une variable qui doit être reflétée dans la ou les pages suivantes, utilisez:
var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);
Et dans n'importe quelle page (comme lorsque la page a été chargée), obtenez-la comme:
var someVarName = localStorage.getItem("someVarKey");
.getItem() retourne null si aucune valeur n'est stockée, ou la valeur stockée.
Notez que seules les valeurs de chaîne peuvent être stockées dans ce stockage, mais cela peut être résolu en utilisant JSON.stringify et JSON.parse. Techniquement, chaque fois que vous appelez .setItem(), il appellera .toString() sur la valeur et le stockera.
Le guide de stockage DOM de MDN (lié ci-dessous), a des solutions de contournement/polyfills, qui finissent par revenir à des choses comme les cookies, si localStorage n'est pas disponible.
Ce ne serait pas une mauvaise idée d'utiliser une mini-bibliothèque existante ou de créer votre propre mini-bibliothèque la possibilité d'enregistrer n'importe quel type de données (comme les littéraux d'objets, les tableaux, etc.).
Références:
- Navigateur
Storage- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage -
localStorage- https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage -
JSON- https://developer.mozilla.org/en-US/docs/JSON - Compatibilité de stockage du navigateur - http://caniuse.com/namevalue-storage
- stockage des objets - stockage des objets dans HTML5 localStorage
En plus des cookies et localStorage, Il y a au moins un autre endroit où vous pouvez stocker des données client "semi-persistantes": window.name. Toute valeur de chaîne que vous affectez à window.name restera là jusqu'à ce que la fenêtre soit fermée.
Pour le tester, ouvrez simplement la console et tapez window.name = "foo", puis actualisez la page et tapez window.name; Il devrait répondre avec foo.
C'est un peu un hack, mais si vous ne voulez pas que les cookies remplis de données inutiles soient envoyés au serveur à chaque requête, et si vous impossible d'utiliser localStorage pour une raison quelconque (clients hérités), cela peut être une option à considérer.
window.name a une autre propriété intéressante: il est visible pour windows desservi par d'autres domaines; il n'est pas soumis à la Politique de même origine comme presque toutes les autres propriétés de window. Ainsi, en plus de stocker des données "semi-persistantes" pendant que l'utilisateur navigue ou actualise la page, vous pouvez également l'utiliser pour une communication inter-domaines sans CORS.
Notez que window.name ne peut stocker que des chaînes, mais avec la grande disponibilité de JSON, cela ne devrait pas être un problème, même pour les données complexes.
Vous devrez utiliser un cookie pour stocker la valeur dans l'actualisation de la page. Vous pouvez utiliser l'une des nombreuses bibliothèques de cookies basées sur javascript pour simplifier l'accès aux cookies, comme celui-ci
Si vous voulez soutenir uniquement html5 alors vous pouvez penser de Stockage api comme localStorage/sessionStorage
Ex: à l'aide de localStorage et cookies bibliothèque
var mode = getStoredValue('myPageMode');
function buttonClick(mode) {
mode = mode;
storeValue('myPageMode', mode);
}
function storeValue(key, value) {
if (localStorage) {
localStorage.setItem(key, value);
} else {
$.cookies.set(key, value);
}
}
function getStoredValue(key) {
if (localStorage) {
return localStorage.getItem(key);
} else {
return $.cookies.get(key);
}
}