在Javascript中从一个脚本检索变量到另一个脚本

Question

I have two html files, fileA.html and fileB.html, respectively associated with two javascript files fileA.js and fileB.js

On the first html file (fileA.html), I have differents links with same className and differents value, for exemple three firsts links:

<a real="external" href="fileB.html" class="links"> value 1</a>
<a real="external" href="fileB.html" class="links"> value 2</a>
<a real="external" href="fileB.html" class="links"> value 3</a>

As you can see, the "href" tag redirects to the second html file fileB.html

On the file fileB.html, I have a text input form which allows the user, by entering one of the values ​​present in the previous html file (for example value 2), to have access to statistics on this value ( I simplified the problem but in fact these values ​​refer to gene names )

I want that when the user clicks on one of the links (so one of the values), this value becomes the defaults value to the input value of the form

I have add a Event onclick on all my links, to retrieve the value of the link (userValue = .textContent)

On the fileB, I know that I have to change the default value by doing this:

form = document.getElementById('formulaire');

formulaire.value = userValue;

The problem is, I don't know how to retrieve the variable on the file A (generate when we click on a link) , to the second file

Maybe it's not possible in javascript ..

Thank's by advance

Answer 1

You can achieve this by using localStorage, ie up on click o the link in file a write a on click function, store the clicked value to the localstorage from there, then from the second page retrieve this stored value from local storage. You can use the set get methods of local storage as below

localStorage.setItem("myVal", "val1");
var val = localStorage.getItem("myVal");

Answer 2

There are a couple of ways to do this. You could either attach a query or a hash to the href of your link. Or even go as far and use the localStorage or sessionStorage. However, I wouldn't advice doing so, as the value is permanent for localStorage and for both it is unclear what is happening.

The solution with a hash:

<a real="external" href="fileB.html#value=1" class="links">value 1</a>
<a real="external" href="fileB.html#value=2" class="links">value 2</a>
<a real="external" href="fileB.html#value=3" class="links">value 3</a>

Then on fileB.html you could check if a hash variable is present and select that given value.

 const ALLOWED_FIELDS = ['value']; function selectGivenValue() { const hash = location.hash.substring(1); // This allows for multiple values to be passed hash.split('&').forEach(entity => { const [name, value] = entity.split('=', 2); // Check if field can be set if (ALLOWED_FIELDS.indexOf(name) === -1) { return; } // Set all fields with the attribute name document.querySelectorAll(`[name=${name}]`).forEach(field => { field.value = value; }); }); } // Run the function as soon as possible selectGivenValue(); 

 <select name="value"> <option value="">Please select value</option> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> <p><strong><a href="#value=1" onclick="setTimeout(selectGivenValue,100)">This link is just here to set the hash variable.</a></strong></p>