Question

我有一个3步餐厅菜单项目订单表格，该表格已经用JavaScript编码html中的代码，但我觉得查询或JavaScript中的函数有些不对劲，而且它无法正常工作，主要是订单计算< / p>

3。步骤表单详细信息：

menu.html：

此处用户将通过单击按钮（图像）添加菜单项，然后单击的项目将显示在同一页面的右侧，然后单击结帐按钮。
payment.html：

这里我想显示我已选择订购的所选商品，然后用户将查看该商品并点击结帐按钮
delivery.html：

这里他们会看到总订单价格一个按钮..在这一步他们还需要在那里放置名称地址，城市等...就像表格注册＆amp;点击该网站所有者获取消息后，现在点击按钮下单。

****** html code menu.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 page ****

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

Answer 1

您可以使用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或网址重写。

Answer 2

使用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));

Answer 3

您可以利用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方法，而不是getter和setter方法如果你想要直接属性。例如localStorage.key = value; （setter），var x = localStorage.key;器（getter）。

在下一页

3 个答案: