I have two html files: index.html and lobby.html. In main.js, which I load in index.html, lobby.html is loaded using window.location.href. I have tried every way of defining globals in main.js (namespaces such as: var Global = {}; Global.variableName = 0; ... Global.variableName = whatever;, simply defining variables out of function scopes: var myGlobal; and even using window. to define and use globals: window.myGlobal = 0; ... window.myGlobal = whatever;). No matter any of these approaches, every time I try to access these "globals" in a separate script in lobby.html, it always throws an undefined error. How does this make any sense?
Asked
Active
Viewed 58 times
0
-
does lobby.html load main.js at all? is it loaded BEFORE any script that tries to use these globals? – Jaromanda X Dec 29 '16 at 04:45
-
are you sure main.js is loaded before accessing it. – Easwar Raju Dec 29 '16 at 04:52
-
Whenever you load a web page (including `window.location.href`), you're starting a new session. Anything you had in memory from a previous session is gone. Among other things, it acts as a security feature. If you want to keep some of that information, you'll either have to use cookies or pass session variables as part of your http request. e.g. `http://mypage.com/lobby.html?myGlobal=foo` – Vince Dec 29 '16 at 04:59
2 Answers
2
The answer to your first question, Why can't I ...?, is that you start a new session whenever you load a page. So, any of the Javascript variables from the previous session are gone.
The other (implied) question, How can I keep the value of Javascript variables across sessions? is either to use cookies in Javascript (MDN) or append request variables to the end of your URL then process them when the new page loads: GET (SO)
1
When a new page is loaded, you are essentially starting a new session as explained by others here and hence the data will be reset. For retaining some data across pages, you could use HTML5 Web storage - Session storage or Local storage as per your business needs.
The two mechanisms within Web Storage are as follows:
- sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).
- localStorage does the same thing, but persists even when the browser is closed and reopened.
HTML local storage provides two objects for storing data on the client:
~ window.localStorage - stores data with no expiration date
~ window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)
-
I had a lot of difficulty voting this answer up... I'm allergic to W3Schools :P (even though [there's really no reason to be any more](http://www.w3fools.com/)), but HTML5 Web Storage is a better solution in a lot of cases. There's also an [MDN Tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) and HTML5Rocks links to several resources about [HTML5 Web Storage](https://www.html5rocks.com/en/features/storage). – Vince Dec 29 '16 at 05:33
-
@Vince - lol, honestly I go for MDN, but for beginners (including me when I started coding) MDN is scary (just like MSDN ;) ) and W3Schools is simple enough to understand and try out the concepts :) I'm gonna update the answer with the MDN link. Thank you – Developer Dec 29 '16 at 05:49
-
@Developer I tried using sessionStorage to store a socket in socket.io (sessionStorage.socket = io();) but every time i try to call a function with the socket (sessionStorage.socket.emit(...);) the error states that "sessionStorage.socket.emit() is not a function" – Dec 29 '16 at 16:04
-
You cant store an event/object in session storage; it supports string key-value pairs. May be you can serialize and store objects in session storage. But I think storing a socket is not the right way to do - there is something wrong with the approach. – Developer Dec 29 '16 at 16:38