Question

我有一个订单页面，其中用户选择项目（单选按钮）和数量）文本框），并且可以在数据验证后使用本地存储来存储值，然后当用户： 1.点击添加到购物车按钮项目+数量的值应添加到购物车页面的列表框中 2.点击转到购物车按钮，即进入购物车页面并返回先前输入的值仍然在订单页面中。

关于如何做到这一点的任何建议真的很棒！这是我目前的代码：

HTML

物品类型笔图书数量

购物车HTML页面

<form name="items">
            Items <SELECT name="item_list" id="item_list">
                <option value=""></option>
            </SELECT>

        </form>
        <form id="gotoorder" name="gotoorder" method="get" action="orderform.html">
        <input type="button" value="Order page" onclick="location.href='orderform.html'">
        </form>

使用Javascript / Jquery的

$(document).ready(function() {
    // add span element after each input element
        $(":input[type=text]:not([readonly='readonly'])").after("<span>*</span>");
        // move focus to first text box
    $("#items").focus();
        // the handler for the click event of a submit button
    $("#orderform").submit(
        function(event) {
            var isValid = true;
         //validate quantity
                     var qty=$("#qty").val();
                     if (qty == "") {
                $("#qty").next().text("Please enter quantity");
                isValid = false;
            }
                        else {
                $("#qty").next().text("");
            }
            //storing quantity value to local storage
             localStorage.setItem("Quantity", document.orderform.qty.value );            
        //submit the form if all entries are valid 
               if (isValid == false) {
                event.preventDefault();
                                localStorage.clear();
            }
                }
                );

        });
//retrieving quantity value to local storage
var qtyval=localStorage.getItem("Quantity");
document.orderform.qty.value=qtyval;

Answer 1

您可以使用HTML5方法在localStorage（更多here on w3school）中存储数据：

HTML5 Web Storage提供了两个用于在客户端上存储数据的新对象：

window.localStorage - stores data with no expiration date
code.sessionStorage - stores data for one session (data is lost when the tab is closed)

在使用网络存储之前，请检查浏览器对localStorage和sessionStorage的支持：

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

方法如下：

setItem(key,value) : stocks a key/value pair
getItem(key)  : returns the value associated with the key
removeItem(key) : delete the corresponding pair via the key name
key(index) : returns the key in stock at this index
clear(): clears all pairs

使用：

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

本地存储用于存储单选按钮的值，数据验证后的文本框

1 个答案: