Can we refer to JavaScript variables across webpages in a browser session?

Going through w3schools tutorial for JavaScript, found below statement:

A global variable has global scope: All scripts and functions on a web page can access it.

So, my query is, do we have a way to refer to variables declared in a particular webpage?

For example, in C, we have extern keyword, using which we can access the variables which are declared in another file, but we can refer to it in our file.

For example:

Inside script tag of fileA.html, we have declared var x = 50, outside function() declaration, so it is global w.r.t fileA.html. If I have fileB.html, can we refer to x from within script tag embodied in fileB.html?

Just to be clear, this is not a scenario of reusing JavaScript files across webpages.

Answers:

Answer

lol No. ;)

When the browser navigates away from a page, the global scope and all scripts are completely unloaded before the next page is loaded.

Allowing one page to access another page's variables would be an enormous security hole.

Answer

if your webpages are in the same DOMAIN, they could share a localStorage. you can store strings in localStorage and load them on document ready. You will need to handle concurrency/readwrite issues yourself however.

Answer

By "global" they mean global throughout the particular script in which they are declared. They are destroyed as soon as the script finishes its execution along with all other variables except cookies.

You can do what you are talking about (passing values in-between webpages) through cookies. They are stored on users computers and are not destroyed unless destroyed explicitly or are expired.

Answer

You can use LocalStorage and Session Storage to achieve same.

MDN

W3Schools

Answer

Yes is kind of "possible", there is a concept call ever cookie, which intent to persist at all cost a cookie even if you change from browser to browser,the idea is to store in any available storage mechanisms in the browser (local storage,cookie, flash cookie, indexDB, etc) the data. So if one of the storage fails, the cookie is copy from one location to another, so meanwhile one storage is alive with the cookie data, this will persist alway. Cross Browser support could works if the user have Flash Local Shared Object cookie

the source: http://samy.pl/evercookie/

Saying that: I don't think is a good idea use this approach, maybe whit a simple localStorage['myvariable'] = {data:"data"} could be sufficient.

Answer

You can use Web Workers ; MessageChannel , see How to clear the contents of an iFrame from another iFrame ; or window.postMessage() to communicate or pass variables between browsing contexts.


An approach utilizing SharedWorker

fileA.html

<!DOCTYPE html>
<html>
  <head>
    <script src="scriptA.js"></script>
  </head>
  <body>
    <a href="fileB.html" target="_blank">fileB</a>
  </body>
</html>

scriptA.js

var x = 50, p;

var worker = new SharedWorker("worker.js");

worker.port.addEventListener("message", function(e) {
  alert(e.data);
  if (!p) {
    p = document.createElement("p");
    p.innerHTML = e.data;
    document.body.appendChild(p)
  }
}, false);

worker.port.start();

console.log("Calling the worker from fileA")

worker.port.postMessage(x); // post `50` to worker

fileB.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="scriptB.js"></script>
  </head>
  <body>
  </body>
</html>

scriptB.js

var x, p;
var worker = new SharedWorker("worker.js");
worker.port.addEventListener("message", function(e) {  
  if (!x && !p) {
    x = e.data; // at `connections`:`1` : `e.data`:`50`
    p = document.createElement("p");
    p.innerHTML = "Message from fileA:" + x;
    document.body.appendChild(p)
  }
}, false);  
worker.port.start();  
console.log("Calling the worker from fileB");
worker.port.postMessage("");

worker.js

self.x = null, connections = 0;

onconnect = function(e) {
  var port = e.ports[0];
  ++connections;
  port.addEventListener("message", function(e) {
    if (!self.x) {
      self.x = e.data;
      port.postMessage("Received:" + self.x 
                       + " from fileA, total connections:" 
                       + connections);
    } else {
      port.postMessage("fileB received:" + self.x 
                       + " total connections:" 
                       + connections);
    }
  });
  port.start();
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.