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

Question

我有一个迷你结账 JavaScript 购物车，在用户得到他们的总数后，他们输入他们支付的金额，然后他们的找零被退回。为此，我需要在页面加载后存储 "total" 变量值。这就是我使用 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 时，它会 return 一个字符串而不是一个数字。所以如果你打算对值使用算术，你必须转换它：

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

Answer 2

我发现您的以下代码行有问题：

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

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

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

引用自the local storage documentation

The getItem() method of the Storage interface, when passed a key name, will return that key's value or null if the key does not exist.

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

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 在页面加载后无法保存数据

JavaScript localStorage not working to save data after page loads

javascript

jquery

shopping-cart

local-storage