如何高效地在本地內存中存儲多個產品

我有一個HTML/JavaScript項目在幾個星期內到期，我堅持創建購物車功能的方式。我有購物車的基本知識。但它似乎是每個單一產品的很多代碼。我不知道如何使用數組或腳本將所有產品正確有效地存儲在本地內存中，但我不確定如何最好地完成此操作。這是我到目前爲止有：如何高效地在本地內存中存儲多個產品

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <body> 
 
    <p><button onclick="AddAMToCart()" type="button">Add AM to Cart</button></p> 
 
    <p><button onclick="AddSonicHighWaysToCart()" type="button">Add SonicHighWays to Cart</button></p> 
 
    <p><button onclick="AddHotelCaliforinaToCart()" type="button">Add    HotelCaliforina to Cart</button></p> 
 
    <p><button onclick="AddFiddyCentToCart()" type="button">Add FiddyCent to Cart</button></p> 
 
    <br> 
 
    <p><button onclick="clearCart()" type="button">Clear Cart</button></p> 
 
    <div id="result"></div> 
 
    </body> 
 

 

 
    <script> 
 
    var AM = 3.50; 
 
    var SonicHighWays = 4.50; 
 
    var HotelCaliforina = 6.00; 
 
    var FiddyCent = 0.50; 
 

 
    function AddAMToCart() { 
 
     if (typeof(Storage) !== "undefined") { 
 
     if (localStorage.Cart) { 
 
      localStorage.Cart = Number(localStorage.Cart) + AM; 
 
     } else { 
 
      localStorage.Cart = 0; 
 
     } 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
     } 
 
    } 
 

 
    function AddSonicHighWaysToCart() { 
 
     if (typeof(Storage) !== "undefined") { 
 
     if (localStorage.Cart) { 
 
      localStorage.Cart = Number(localStorage.Cart) + SonicHighWays; 
 
     } else { 
 
      localStorage.Cart = 0; 
 
     } 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
     } 
 
    } 
 

 
    function AddHotelCaliforinaToCart() { 
 
     if (typeof(Storage) !== "undefined") { 
 
     if (localStorage.Cart) { 
 
      localStorage.Cart = Number(localStorage.Cart) + HotelCaliforina; 
 
     } else { 
 
      localStorage.Cart = 0; 
 
     } 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
     } 
 
    } 
 

 
    function AddFiddyCentToCart() { 
 
     if (typeof(Storage) !== "undefined") { 
 
     if (localStorage.Cart) { 
 
      localStorage.Cart = Number(localStorage.Cart) + FiddyCent; 
 
     } else { 
 
      localStorage.Cart = 0; 
 
     } 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
     } 
 
    } 
 

 
    function clearCart() { 
 
     localStorage.Cart = 0; 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
    } 
 
    </script> 
 
</head> 
 

 
</html>

來源

2017-04-06 Jack

您可以重構代碼的全部，弄成這個樣子：

創建與產品價值的單個對象：

提示：當使用JS對象productValues.HotelCalifornia時與productValues["HotelCalifornia"]相同。

var productValues = { 
    AM: 3.50, 
    SonicHighWays: 4.50, 
    HotelCaliforina: 6.00, 
    FiddyCent: 0.50 
}

然後將所有這些功能整合到這樣的抽象。

function AddToCart(type) { 
    if(typeof(Storage) !== "undefined") { 
     if (localStorage.Cart) { 
      localStorage.Cart = Number(localStorage.Cart) + productValues[type]; 
     } else { 
      localStorage.Cart = 0; 
       } 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
    } 
}

那麼你會打電話給你的新方法，像這樣：

AddToCart("HotelCaliforina");

或像這種內嵌在HTML

AddToCart('HotelCaliforina');

也是正確的我，如果我錯了這裏，但如果你確實是「添加」到購物車，那麼你永遠不會想要在你的「else」語句中分配的0值。 localStorage.Cart應該這樣「添加到購物車」功能之外預定義：

var localStorage = { 
    Cart: 0, 
    Etc: "Some Value" 
}; 
function AddToCart(type) { 
    localStorage.Cart = Number(localStorage.Cart) + productValues[type]; 
    document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 

}

希望這回答了你的問題，並幫助你一點。

來源

2017-04-06 16:52:34

如何高效地在本地內存中存儲多個產品

回答

相關問題