在页面之间同步 JavaScript 变量

Question

I have been looking for ages trying to find a way to access a variable in another.html file. For example: File 1 (HTML)

<!--some code-->
<script>
var x; //this should equal the variable in the other file.
</script>

File 2 (HTML)

<!--some code-->
<script>
var y = 0;
</script>

How could I do it? (I can move file 2's code into a separate.js file.

Answer 1

You'll have better luck storing the variable in localStorage.

Set the key in one page

localStorage.setItem('key', value);

Retrieve the value from another

localStorage.getItem('key')

The other way is to use cookies .

Answer 2

For this you can use localStorage which is supported in all modern browsers.

Note that localStorage.setItem() will do .toString() on everything that you attempt to store that isn't a string yet. It is best to use JSON.stringify() and JSON.parse() for setting and retrieving everything. Doing so may not be needed for strings themselves but it doesn't hurt much to just do it always.

I often use helper functions to make working with it easier, like this:

function storeObject(key, x) {
  localStorage.setItem(key, JSON.stringify(x));
}

function retrieveObject(key) {
  return JSON.parse(localStorage.getItem(key));
}

storeObject("test", { a: 2, b: 3 } );

const obj = retrieveObject("test")
console.dir(obj.a); // prints 2
console.dir(obj.b); // prints 3

PS I did not create a Stack Snippet because snippets don't allow the use of localStorage.