How can I use a variable from another JavaScript file?-CodePudding

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  id="about">
  <div >
    <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 >
  <div >
    <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?

CodePudding user response：

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'

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

CodePudding user response：

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.

CodePudding user response：

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