Question

I have an HTML/JavaScript project due in a few weeks and I'm stuck on a way to create a cart function. I have the basics of the cart sorted. but it seems to be a lot of code for each single product. I'm not sure how I can properly and efficiently store all the products in local memory using arrays or script but I'm not sure how to do it best. This is what I have so far:

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

Answer 1

You could refactor all of that code into something like this:

Create a single object with the product values:

Tip: When working with JS objects productValues.HotelCalifornia is the same as productValues["HotelCalifornia"].

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

Then consolidate all of those functions into something like this abstraction.

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

Then you would call your new method like so:

AddToCart("HotelCaliforina");

or Like this inline with your HTML

AddToCart('HotelCaliforina');

Also correct me if im wrong here but if you are indeed "Adding" to cart then you would never want a 0 value as assigned in your "else" statement. localStorage.Cart should be predefined outside of the "Add to cart" function like this:

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;

}

Hope this answers your question and helps you a bit.

How to store multiple products in local Memory efficiently

1 个答案: