Question

我试图将值从产品的一页传递到购物车的另一页。

我尝试了几种不同的选择，但还没有提出任何解决方案。

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

我需要从下拉列表中获取价值，以传递到购物车页面，以计算出所有选定用户产品的价值。

Answer 1

您需要向sessionStorage添加两个参数：key和value。像这样：

sessionStorage.setItem("selectValue", value);

据我所知，如果您使用在浏览器中以path/cart.html之类的方式打开的本地html文件，则sessionStorage不能为您提供帮助；它的范围仅限于页面。如果通过本地主机为他们提供服务，那就没事了。

Answer 2

如果此页面的URL不同，则可以使用查询参数：https://en.wikipedia.org/wiki/Query_string

Answer 3

通过浏览器存储方法：

如@Ferenc所述，会话存储的setItem方法具有两个参数。

const StackNavigatorConfig = {
  [...]
  transitionConfig : () => ({
    transitionSpec: {
        duration: 0,
        timing: Animated.timing,
        easing: Easing.step0,
    },
  }),
}

export const Navigator = StackNavigator(RouteConfiguration,StackNavigatorConfig)

或者您可以使用 sessionStorage [“ selectedItem”] =“值”;

要在浏览器中的其他任何地方检索值，您可以使用sessionStorage.setItem("selectedItem","value");方法，也可以使用类似于值访问方法的数组，即

getItem()

但是我建议您使用localStorage而不是sessionStorage，因为它的范围比sessionStorage范围大。您可以阅读difference b/w session storage and local storage here.
注意：您可以通过在浏览器控制台中查看来检查javascript代码中的错误（当您使用单个参数调用getItem方法时，现在会发生这种错误）。

通过查询参数：

好吧，如果您不使用任何服务器端语言，则不建议使用此方法。即Java，PHP等。在这种情况下，您可以将查询字符串附加到url中。即

var value = sessionStorage["selected"];

要了解如何使用javascript访问查询参数，请参阅this question.

将变量从一页传递到另一页

3 个答案: