Передача переменных с одной страницы на другую - PullRequest
1 голос
/ 12 апреля 2019

Я пытаюсь передать значение с одной страницы продукта на другую страницу корзины.

Я пробовал несколько разных вариантов, но не смог найти какое-либо решение.

Я новичок в html и javascript, поэтому мне нужно простое решение, если это возможно, чтобы я мог понять.

Страница продукта

<label for="exampleFormControlSelect1">Example select</label>
<div>
   <select class="form-control" id="Selected">
       <option value='1'>1</option>
       <option value='2'>2</option>
       <option value='3'>3</option>
       <option value='4'>4</option>
       <option value='5'>5</option>
   </select>
</div>
<button id='btn' type="button" class="btn btn-secondary">Add To Cart</button>

<script type="text/javascript">
   var value=0;

   function send_selected(){
      var selector = document.getElementById('Selected');
      var value = selector[selector.selectedIndex].value;

      sessionStorage.setItem(value);
   }

   document.getElementById('btn').addEventListener('click',send_selected);
</script>

Страница корзины

<script type="text/javascript">
   var value = sessionStorage.getItem("value");
   document.getElementById('display').innerHTML = value;
</script>

<body>
  <div id="display"></div>
</body>

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

Ответы [ 3 ]

1 голос
/ 12 апреля 2019

Вам необходимо добавить два аргумента для sessionStorage: ключ и значение. Примерно так:

sessionStorage.setItem("selectValue", value);

Кроме того, насколько я знаю, если вы работаете с локальными html-файлами, открытыми как path/cart.html в браузере, sessionStorage не может вам помочь; его область ограничена страницей. Если вы будете обслуживать их через localhost, вы будете в порядке.

0 голосов
/ 12 апреля 2019

По методу хранения в браузере:

Как уже упоминалось @Ferenc, метод setItem для хранения сеанса принимает два параметра.

sessionStorage.setItem("selectedItem","value");

или вы можете использовать sessionStorage["selectedItem"] = "value";

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

var value = sessionStorage["selected"];

Но я бы посоветовал вам перейти с localStorage вместо sessionStorage, поскольку он имеет большую область действия, чем область sessionStorage.Вы можете прочитать разницу ч / б хранения сеансов и локального хранилища здесь.
Примечание. Вы можете проверить наличие ошибок в своем коде JavaScript (что теперь происходит, когда вы вызываете метод getItem с одним параметром) с помощьюзаглядывая в консоль браузера.

По параметрам запроса:

Ну, это не рекомендуемый метод, если вы не используете серверный язык.т.е. Java, PHP и т. д. В этом случае вы добавляете строку запроса в URL.то есть

http://www.url.com?value=selected

Чтобы прочитать, как получить доступ к параметрам запроса с помощью JavaScript, обратитесь к этому вопросу.

0 голосов
/ 12 апреля 2019

Если у этих страниц разные URL, вы можете сделать это с помощью параметров запроса: https://en.wikipedia.org/wiki/Query_string

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...