JavaScript 将变量数值存储为 cookie 或会话答案

【问题标题】：JavaScript storing variable numeric value as cookie or sessionJavaScript 将变量数值存储为 cookie 或会话
【发布时间】：2019-02-03 07:20:20
【问题描述】：

如何存储一个变量，该变量将作为 cookie 保存总计，或者即使在页面加载后也将存储数据的任何方法。我有一个 JavaScript 练习，用户选择项目，然后显示它们的总数。一旦显示他们的总数，他们必须输入他们将如何支付（即金额）。然后我想退还他们的零钱。这就是为什么我需要在页面加载后存储总变量值。下面是我的代码。

var 购物项目 = { 《不锈钢锅》：29.99， “迷你不锈钢搅拌机”：19.99， “厨房毛巾套装”：7.99， “大棕褐色咖啡杯”：5.49， “5 圆形餐盘套装”：5.99， “盐和胡椒瓶套装”：1.99， “大蓝扫帚”：3.98， “粉红肥皂碟”：2.50， “银色浴室垃圾桶”：6.99，《丝黑浴袍》：9.99， };

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

  function getOrderTotal() {
    listOfCheckedItems(shoppingItems);
  }

////////// 上面的所有代码都有效。但是 var total 变量是我需要的 cookie 或某种类型的 JavaScript 会话变量。

下面的代码是我计算用户总数的地方，以及为什么我需要保存可变的总数值。我需要能够用他们的产品总额减去用户支付的金额。有人可以帮帮我吗？

  function whatUserPaidWith() {
    var amountUserPaid = $("#amountPaid").val();
    var customerChange = amountUserPaid - total;
    document.getElementById("displayUserChange").innerHTML = "You paid <strong>" + amountUserPaid + "</strong> your change due is <strong>" + customerChange + "</strong>";

  }

HTML 代码选择您的物品，然后在收银台结账

在收银台选择一件或多件商品

百货商店物品不锈钢锅 - $29.99
迷你不锈钢搅拌机 - 19.99 美元
厨房毛巾套装 - $7.99
大棕褐色咖啡杯 - 5.49 美元
5 圆形餐盘套装 - 5.99 美元
盐和胡椒瓶套装 - 1.99 美元
大蓝扫帚 - 3.98 美元
粉色肥皂碟 - 2.5 美元
银色浴室垃圾桶 - 6.99 美元
丝绸黑色浴室长袍 - 9.99 美元

提交

您将如何支付购买费用？

请在下方输入您要支付的金额。

输入总金额：

提交

【问题讨论】：

为什么不使用 localStorage 而不是 cookie？
@simplelenz 如何使用 localStorage？

标签： javascript jquery cookies session-cookies shopping-cart

【解决方案1】：

您可以使用 sessionStorage api 在会话中保留值。

为此，只需将您的变量作为属性添加到sessionStorage 对象上：

sessionStorage.setItem('totalNumericValue ', 300);

要稍后访问该值，您可以通过引用属性来实现：

sessionStorage.getItem('totalNumericValue')

【讨论】：

非常感谢
这是我的新代码，但我收到一条错误消息：
错误消息说：未捕获的引用错误：分配中的左侧无效
而不是 sessionStorage 使用 localStorage。因为如果您在新选项卡中打开链接，sessionStorage 数据将不会保留，但 localStorage 会保留。
问题中专门要求了“JavaScript 会话变量”。自动选择最持久的选项是不明智的。