La variable globale de Javascript ne persiste pas lorsque vous naviguez vers une autre page (qui utilise également le même fichier js)

J'ai partagé un code js comme ceci dans angus.js

var g_colour; function getcolour() { return g_colour; } function setcolour(colour) { g_colour = colour; }

Ce qui est accessible par les pages html 1 et 2 comme ceci:

1.html:

 <html> <head> <title>Global javascript example</title> </head> <body> <a href="2.html">Page2</a> <script src="angus.js"></script> <form name="frm"> <input type="button" value="Setblue" onclick="setcolour('blue');" /> <input type="button" value="Setyellow" onclick="setcolour('yellow');" /> <input type="button" value="getcolour" onclick="alert(getcolour());" /> </form> </body> </html>

2.html:

 <html> <head> <title>Global javascript example page 2</title> </head> <body> <a href="1.html">Page1</a> <script src="angus.js"></script> <form name="frm"> <input type="button" value="Setblue" onclick="setcolour('blue');" /> <input type="button" value="Setyellow" onclick="setcolour('yellow');" /> <input type="button" value="getcolour" onclick="alert(getcolour());" /> </form> </body> </html>

Si je définis une couleur dans une page et que je navigue jusqu'à la page 2, puis PUIS, j'adore la couleur, elle renvoie indéfinie. C'est-à-dire, il me semble qu'une nouvelle instance de g_colour est créée lors du chargement d'une nouvelle page html.

Je veux pouvoir accéder à une sorte de variable de niveau supérieur que je peux définir dans la page 1 et accéder à la page 2. Comment puis-je le faire en Javascript?

Les variables JS n'ont jamais été persistantes, mais il existe deux façons:

Biscuits
Espace de rangement

Les cookies sont pris en charge dans tous les navigateurs sauf les plus anciens, mais ils peuvent être très difficiles à utiliser et difficiles à utiliser. En plus de cela, votre navigateur envoie des cookies au serveur avec chaque pageload, donc s'il n'est utilisé que par JavaScript, il est très inefficace.

Au lieu de cela, vous devriez probablement regarder l'option de stockage.

L'enregistrement d'un élément est aussi simple que localStorage.itemname = value; La lecture est aussi simple que localStorage.itemname et la suppression est aussi littérale que delete localStorage.itemname

Ces valeurs sont enregistrées dans les paquets de données, mais pas envoyées au serveur.

Chaque demande de page demandera le script et en exécutera sa copie, même si la requête s'arrête sur le client en raison du cache, la page actuelle l'exécute toujours à partir de zéro. Ils travaillent avec le même code, oui, mais des instances différentes (c.-à-d., Vous avez deux copies de cette variable dans deux contextes différents).

Utilisez localStorage:

 localStorage.setItem('name', 'value'); var something = localStorage.getItem('name');

setItem sur votre première page, puis getItem sur votre deuxième.

Le stockage local persiste à travers les paquets de données, par opposition aux variables JavaScript "normales".

Les variables "normales" sont initialisées dès que le fichier JS est chargé (et s'exécute), mais est détruit lorsque le fichier est déchargé, de sorte que lorsque l'utilisateur quitte une page.

Vous pouvez également utiliser Cookies, mais ils ont du mal à travailler avec JS, car ils sont stockés dans une chaîne comme:

 'name=value; name1=value1; name2=value2';

Le problème est que votre page 1 est en train de charger le fichier JavaScript et la page 2 la charge de nouveau. Par conséquent, tout ce que vous avez configuré dans une variable sur ce fichier JS sera perdu lorsque la page 2 sera chargée car la page 2 initialisera à nouveau le fichier JS. Si vous le souhaitez, vous pouvez utiliser un cookie pour stocker la valeur ou s'il vous plait de combiner la page 1 et la page 2, mais les mettre dans une div différente et afficher / cacher le div selon votre logique.