JavaScript localStorage not working to save data after page loads

Question

I have a mini check out JavaScript cart where after the user gets their total they enter how much they're paying with then their change is returned. In order to do that I need to store the "total" variable value after the page loads. Which is why I'm using localStorage. However, it's not working. Can someone help me?

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

I see a problem with the following line of your code:

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

I hope my following suggestions help you.

Firstly there shouldn't be a semi colon in the middle of the statement.
Secondly localStorage.getItem("total") cannot be used as a variable to store a value (as you are attempting to do). Rather localStorage.getItem() is a method which returns a value.

Here is a quote from 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.

So my suggestion is that you change the above lines of your code to the following:

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")

I hope that helps :)