传递一个javascript onclick函数，在下一页中选中项目

Pass a javascript onclick function selected items in next page

本文关键字：一页 函数 项目 onclick javascript 一个      更新时间：2023-09-26

我有一个三步餐厅菜单项订单表单，该表单已经用JavaScript在html中编码了代码，但我认为查询或JavaScript中的函数出现了一些问题，并且无法正常工作，主要是订单计算

3。步骤表单详细信息：

  1. menu.html：

    在这里，用户将通过点击按钮（图片）添加菜单项，然后点击的项目将显示在同一页面的右侧，然后点击结账按钮。

  2. payment.html：

    在这里，我只想显示我已经选择订购的选定项目，然后用户将查看并点击结账按钮

  3. delivery.html:

    在这里他们会看到那里的总订单价格一个按钮。。在这个步骤中，他们还需要填写姓名、地址、城市等；底部一个按钮现在下单，点击后该网站的所有者会收到一条消息。

******html代码菜单.html******

<li>
    <div class="row">
        <div class="col-xs-8">
            <p>Grilled Fish Fillet</p>
        </div>
        <div class="col-xs-2">
            <p>150 SR</p>
        </div>
        <div class="col-xs-2">
            <button onclick="addtoCard('grilledfishfillet','Grilled Fish Fillet', 150)" style="border:none; background:none;"><img src="images/plus.jpg" alt=""></button>
        </div>
</li>

******delivery.html******

<div id="OrderItem">
    <input name="order1" placeholder="" type="text" id="order1" size="30" value=""  class="form-control  input-lg"><br>
    <input name="order2"  placeholder=" " type="text" id="order2" size="30" value=""  class="form-control  input-lg"><br>
    <input name="order3" placeholder=" " type="text" id="order3" size="30" value=""  class="form-control  input-lg"><br>
    <input name="order4" placeholder="" type="text" id="order4" size="30" value=""  class="form-control  input-lg"><br>
</div>

*****payment.html页面***

<div class="row">
    <div class="col-sm-6">
    <label>First Name</label>
    <input name="name" type="text" id="name" size="30" value=""  class="form-control  input-lg">
    </div>
    <div class="col-sm-6">
    <label>Last Name</label>
    <input name="lname" type="text" id="lname" size="30" value=""  class="form-control input-lg">
    </div>
</div>
<div style="margin-top:40px;padding:5px 30px;" class="bg-color">
    <div class="row">
        <div class="col-xs-12">
            <h3 style="padding-top:10px; text-align:center; font-size:24px;">Total : 246.00 SAR</h3>
        </div>
        
    </div>
</div>

您可以使用localStorage将数据从一个页面传递到另一个页面。基本语法是：

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

设置值：

localStorage.setItem('myObj', 'My Object');

获得一个价值：

localStorage.getItem('myObj');

如果localStorage不受支持，您可以随时返回其中一个cookie或URL重写。

使用localStorage 将值从一个页面传递到另一个页面

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));

您可以利用HTML的localStorage和/或sessionStorage来传递值。这些是HTML功能集，但需要JavaScript进行操作。

localStorage将持久存储您分配的任何值，而sessionStorage将仅为会话保留，就像PHP中的cookie与会话一样。在语法上两者是相同的。

您可以使用这样的语法来存储值-

localStorage.setItem(key, value);

其中key是您的标识符，value是您要存储的数据。为了检索值，您可以调用此-

localStorage.getItem(key);

因此，您可以使用setItem从一个页面存储您的值，并使用getItem在另一个页面上检索。

这里需要注意的几点：

  • 想想数据持久性。

  • 由于localStorage永远保存数据（除非手动删除/浏览器清理），您必须考虑何时需要它以及何时sessionStorage就足够了。

  • localStorage最终是通用的JavaScript对象。

  • 您可以访问/修改getter和setter方法，而不是属性。例如localStorage.key=值；（setter），var x=localStorage.key；（吸气剂）。

相关文章：