Question

我有一个迷你签出JavaScript购物车，在用户获得总计后，他们输入要付款的金额，然后退还其找零。为此，我需要在页面加载后存储“总计”变量值。这就是为什么我使用localStorage的原因。但是，它不起作用。有人能帮我吗？

var itemsSelectedValues = [];
      // variable above is empty array that will ultimately store the items user selected to purchase
      // var total = 0;
      localStorage.setItem("total", 0);
      // variable above is set to 0 that will ultimately represent total of user purchase

      function listOfCheckedItems(catalogToLookFrom) {
        // line above defines function listOfCheckedItems, with parameter catalogToLookFrom being passed in to represent array object "shoppingItems"
        var yourItemsPurchased = $("input:checkbox:checked");
        // line above sets variable yourItemsPurchased to all the checkbox items that were checked
        for (i = 0; i < yourItemsPurchased.length; i++) {
          // line above is a for loop that loops through the entire length of array "yourItemsPurchased"
             itemsSelectedValues.push(yourItemsPurchased[i].value);
             // line above pushes the value of items in array "yourItemsPurchased" into empty array "itemsSelectedValues"
             // this action occurs each time through the loop
        } // line closes for loop
        console.log(itemsSelectedValues);
        for (i = 0; i < itemsSelectedValues.length; i++) {
          // line above loops through array itemsSelectedValues (entire length of array)
          localStorage.getItem("total") = localStorage.getItem("total"); + catalogToLookFrom[itemsSelectedValues[i]];
          // line above sets the variable "total" to itself plus the value of the item name that's in catalogToLookFrom (which represents array object "shoppingItems")
          // this happens each time through the loop
          // so 1st time "total" is set to itself (which is initially 0) plus the value of whatever the 1st item is. Then so on.....
        } // closes for loop
        document.getElementById("yourPurchase").innerHTML = "Your items purchased <strong>" + itemsSelectedValues + "</strong> came to a total of <br/><strong>$" + localStorage.getItem("total"); + "</strong>";
      } // line closes listOfCheckedItems function

      function getOrderTotal() {
        listOfCheckedItems(shoppingItems);
      }

///////// Part not working

  function whatUserPaidWith() {
    var amountUserPaid = $("#amountPaid").val();
    // line above creates variable "amountUserPaid" which is set to the value of element with an id of "#amountPaid"
    var customerChange = amountUserPaid - localStorage.getItem("total");
    document.getElementById("displayUserChange").innerHTML = "You paid <strong>" + amountUserPaid + "</strong> your change due is <strong>" + customerChange + "</strong>";

  }

Answer 1

我看到几个问题；一件事就是您没有用新的总数来呼叫setItem。您应该执行以下操作来设置总数：

function listOfCheckedItems(catalogToLookFrom) {
  var yourItemsPurchased = $("input:checkbox:checked"),
      itemsSelectedValues = [],
      total = 0
  for (i = 0; i < yourItemsPurchased.length; i++) {
      itemsSelectedValues[i] = yourItemsPurchased[i].value
      total += catalogToLookFrom[yourItemsPurchased[i].value];
  }
  localStorage.setItem("total", total)
  document.getElementById("yourPurchase").innerHTML = "Your items purchased <strong>" + itemsSelectedValues.join(',') + "</strong> came to a total of <br/><strong>$" + total + "</strong>";
}

另外，当您调用getItem时，它将返回一个字符串而不是数字。因此，如果您打算对值使用算术，则必须将其转换：

var customerChange = amountUserPaid - (new Number(localStorage.getItem("total")));

Answer 2

我看到您的代码的以下行有问题：

localStorage.getItem("total") = localStorage.getItem("total"); + catalogToLookFrom[itemsSelectedValues[i]];

希望以下建议对您有所帮助。

首先，语句中间不应出现分号。
其次，localStorage.getItem("total")不能用作存储值的变量（如您尝试那样）。相反，localStorage.getItem()是一种返回值的方法。

这里是the local storage documentation

的引文

存储接口的getItem（）方法，当传递键名时，将返回该键的值；如果键不存在，则返回null。

所以我的建议是将代码的以上行更改为以下内容：

var newTotal = localStorage.getItem("total") + catalogToLookFrom[itemsSelectedValues[i]];
localStorage.setItem("total", newTotal);
// lines above set the local storage variable "total" to itself plus the value of the item name that's in catalogToLookFrom (which represents array object "shoppingItems")

我希望对您有所帮助:)

JavaScript localStorage无法在页面加载后保存数据

2 个答案: