如何使用另一个 JavaScript 文件中的变量？

Question

I have two html pages, each with a js file.

When I click on a button on page 1 , it should change a variable param to true and redirect the user to page 2 .

In page 2 I have to check if param = true and then continue my script.

• page1.html

<div class="container-fluid" id="about">
  <div class="row">
    <div id="mainsubtitle">Page 1</div>
    <button id="edit" type="button">Go to page 2</button>
  </div>
</div>

• script1.js

var param = false;

edit.addEventListener("click", switchToOpenSession);
...
function switchToOpenSession() {
    param = true;
    ...
}

• page2.html

<div class="container-fluid">
  <div class="row">
    <div>Page 2</div>
    <button id="create" type="button">Create account</button>
  </div>
</div>

• script2.js

if (param)
   /* do this */

I tried export/import param but I got Unexpected token 'export' error . I tried type="module" but it doesn't work. The samples that I found was two js files in the same html page!

Can someone help please?

Answer 1

you cannot access variable from different page, except you load page2.html using ajax. Alternative way using cookie or localStorage

script1.js

var param = false;

edit.addEventListener("click", switchToOpenSession);
...
function switchToOpenSession() {
    param = true;
    localStorage.setItem('param', true)
    ...
}

then in script2.js

if (localStorage.getItem('param') == 'true') // note the quotes

Answer 2

you can export the variable from first file

var first;

export { first }

and in your second file you can import that variable

import { first} from './first.js'

OR

<script type="module" src='first.js'></script>

Answer 3

You can't share variable states like that. These two pages are totally different instances, so the context is not the same.

Option 1. When you redirect from one page to another you can add URL param and parse it on page 2.

Option 2. Use localStorage . I assume you have the same origin while talking on page 1 and page 2 so the stored data will be visible.