Получить переменную из одного скрипта в другой в Javascript

Question

У меня есть два html-файла, fileA.html и fileB.html, соответственно связанные с двумя файлами javascript fileA.js и fileB.js

В первом html-файле (fileA.html) у меня есть разные ссылки с одинаковым значением className и разные, для примера три первые ссылки:

<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>

Как видите, тег "href" перенаправляет на второй html-файл fileB.html

В файле fileB.html у меня есть форма ввода текста, которая позволяет пользователю, введя одно из значений, присутствующих в предыдущем html-файле (например, значение 2), получить доступ к статистике по этому значению. (Я упростил проблему, но на самом деле эти значения относятся к именам генов)

Я хочу, чтобы, когда пользователь нажимает на одну из ссылок (так одно из значений), это значение становится значением по умолчанию для входного значения формы

Я добавил событие onclick на все мои ссылки, чтобы получить значение ссылки (userValue = .textContent)

В файле B я знаю, что нужно изменить значение по умолчанию, выполнив следующее:

form = document.getElementById('formulaire');

formulaire.value = userValue;

Проблема в том, что я не знаю, как извлечь переменную из файла A (генерировать, когда мы нажимаем на ссылку), во второй файл

Может быть, это невозможно в javascript ..

Спасибо заранее

Answer 1

Есть несколько способов сделать это.Вы можете прикрепить запрос или хеш к href вашей ссылки.Или даже зайдите так далеко и используйте localStorage или sessionStorage.Однако я бы не советовал делать это, поскольку значение постоянно для localStorage, и для обоих случаев неясно, что происходит.

Решение с хешем:

<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>

Затем на fileB.html вы можете проверить наличие хеш-переменной и выбрать данное значение.

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>

Answer 2

Этого можно добиться с помощью localStorage, то есть при щелчке вверх по ссылке в файле и функции записи по щелчку, сохраните выбранное значение в локальном хранилище оттуда, затем со второй страницы извлеките это сохраненное значение из локального хранилища.Вы можете использовать набор методов get локального хранилища, как показано ниже

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