Как я могу динамически вызывать объект свыше html в javascript

Question

У меня есть раскрывающееся меню на одной странице html, и когда я выбираю один вариант этого раскрывающегося меню, я связываю href с другой страницей html. На этой странице html я хочу console.log некоторые конкретные особенности выбранного мной варианта (особенности javascript объекты).

Мой вопрос: как я могу сделать это динамически? Чтобы быть более понятным по аналогии, у меня есть выпадающее меню с фруктами, я выбираю оранжевый, я href в оранжевом. html и на этой странице я хочу утешить объект javascript fruit.orange, но я хочу, чтобы это было динамически не stati c (просто пишу оранжевым. html fruit.orange, потому что я знаю, что нахожусь в оранжевом. html)

Возможно ли это? Я надеюсь, что мой вопрос ясен и не двусмысленен

Answer 1

В зависимости от того, насколько сложен объект, будет неудобно пропустить его через форму, что даст вам возможность сохранить его в локальном хранилище или получить его через AJAX. Я бы согласился с последним, но это, по сути, означало бы делать то, что вы сказали, что вы не хотите делать, то есть распознавать что-то о странице orange.html и делать вызов. Проще говоря, это что-то вроде того, что я бы сделал:

Вкл. orange.html вызов AJAX:

  let xhttp = new XMLHttpRequest()

  xhttp.onreadystatechange = () => {
      if(this.readyState == 4 && this.status == 200) {
          let obj = this.responseText;
      }
  }

  xhttp.open("GET", "orange.js", true)
  xhttp.send()

Конечно, если у вас есть отдельная страница для каждого раскрывающегося списка (например, apple. html, оранжевый. html, et c) вы можете просто жестко закодировать правильный объект на каждой странице, но с помощью AJAX вы можете сделать свой код более сухим, имея одну страницу, которую отправляет форма и, в зависимости от значения раскрывающегося списка, вызовите отдельный файл AJAX (например, оранжевый. js, apple. js) ИЛИ отдельный файл js и возьмите правильный объект:

xhttp.open("GET", "fruit.js", true)

тогда:

let orange = obj.orange

Надеюсь, это имеет смысл.

Answer 2

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

Добавление некоторых данных в localStorage также просто как с использованием метода setItem (). Я буду использовать общий c ключ и значение для имен, но они могут быть любыми строками.

localStorage.setItem('key', 'value')

Если вы хотите получить значение для определенного ключа, вы будете использовать метод getItem ().

localStorage.getItem('key')

Источник: https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

Если вы хотите, чтобы сохраненная информация автоматически удалялась после закрытия браузера, вы можете использовать sessionStorage вместо

sessionStorage аналогично localStorage; разница в том, что, хотя срок действия данных в localStorage не истекает, данные в sessionStorage очищаются по окончании сеанса страницы.

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

Источник: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage