Comment faire pour que la variable JS conserve sa valeur après le rafraîchissement de la page ?

Question

Est-il possible de modifier de façon permanente une variable javascript ? Par exemple, si je définis la variable X et qu'elle est égale à 1, puis que je clique sur un bouton, cette variable devient 2. Comment puis-je faire en sorte que cette variable reste à 2 lors du rafraîchissement de la page ?

Answer 1

Cela est possible avec window.localStorage ou window.sessionStorage . La différence est que sessionStorage dure aussi longtemps que le navigateur reste ouvert, localStorage survit aux redémarrages du navigateur. La persistance s'applique à la tout le site web et pas seulement une seule page.

Lorsque vous devez définir une variable qui doit être prise en compte dans la ou les pages suivantes, utilisez la fonction :

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

Et dans n'importe quelle page (comme quand la page a été chargée), obtenez-le comme :

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

.getItem() retournera null si aucune valeur n'est enregistrée, ou la valeur enregistrée.

Notez que uniquement des valeurs de type chaîne peut être stocké dans ce stockage, mais cela peut être surmonté en utilisant JSON.stringify y JSON.parse . Techniquement, chaque fois que vous appelez .setItem() il appellera .toString() sur la valeur et la stocker.

Le guide de MDN sur le stockage DOM (dont le lien figure ci-dessous) propose des solutions de contournement et des compléments, qui finissent par se rabattre sur des éléments comme les cookies, si localStorage n'est pas disponible.

Ce ne serait pas une mauvaise idée d'utiliser une bibliothèque existante, ou de créer votre propre mini-bibliothèque, qui abstrait la capacité de sauvegarder 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é avec le navigateur Storage - http://caniuse.com/namevalue-storage
• Stockage des objets - Stockage d'objets en HTML5 localStorage

Answer 2

En plus des cookies et des 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 attribuez à window.name restera là jusqu'à ce que la fenêtre soit fermée.

Pour le tester, il suffit d'ouvrir la console et de taper window.name = "foo" puis rafraîchissez la page et tapez window.name il devrait répondre par foo .

Il s'agit d'un peu d'un hack, mais si vous ne voulez pas que des cookies remplis de données inutiles soient envoyés au serveur à chaque requête, et si vous ne pouvez pas utiliser l'option localStorage pour une raison quelconque (clients existants), cela peut être une option à considérer.

window.name possède une autre propriété intéressante : il est visible pour les Windows servis depuis d'autres domaines ; il n'est pas soumis à la politique de l'origine identique comme presque toutes les autres propriétés de l'option window . Ainsi, en plus de stocker des données "semi-persistantes" pendant que l'utilisateur navigue ou rafraîchit la page, vous pouvez également l'utiliser pour des communications inter-domaines sans CORS.

Notez que window.name ne peut stocker que des chaînes de caractères, mais avec la large disponibilité des JSON Si vous n'êtes pas en mesure d'obtenir des informations sur les données, cela ne devrait pas poser de problème, même pour des données complexes.

Answer 3

Vous devrez utiliser un cookie pour stocker la valeur lors du rafraîchissement de la page. Pour simplifier l'accès aux cookies, vous pouvez utiliser l'une des nombreuses bibliothèques de cookies basées sur javascript, telles que celui-ci

Si vous souhaitez ne supporter que le html5, vous pouvez penser à Stockage api comme localStorage / sessionStorage

Ex : en utilisant localStorage y la bibliothèque de cookies

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);
    }
}

Answer 4

Vous pouvez le faire en stockant des cookies du côté client.