javascript - 页面刷新后未存储本地存储

Question

为了将值保存在本地存储中，我很难理解我在代码中做错了什么。

我有一个相当大的代码项目，所以我将尝试总结一下该程序的总体目标。我正在从新闻 API 中提取新闻文章并显示文章；每篇文章(取决于它来自的出版物)将不同的数值插入数组 allSource2。然后我将这个数组的总和得出一个“分数”(变量称为 sum)

我基本上希望将该分数存储在本地，以便即使在页面刷新后也可用。我认为由于我放置 localStorage 函数的位置可能会发生错误。目前我把它放在 click 事件下，该事件也会将数值推送到数组中(当您单击文章标题时)。我对它可能在哪里感到非常困惑，因此每次总和发生变化时它都会真正更新 sum。

此外，它确实可以存储它(我在控制台上检查了 localStorage，刷新后它仍然有效，但是刷新然后单击另一篇文章后，它会重置为任何值这篇文章是)

我没有放完整的代码，因为它太长了。其他一切正常，仅此而已。此外，所有这些都包含在一个大函数中

我在代码的开头定义了let sum =0;。然后，这是点击事件。

document.getElementsByClassName('article-rating')[i]
  .addEventListener('click', function(event) {

    sum = allSource2.reduce((tempSum, val) => tempSum + val);
    console.log("article score is now" + " " + sum);
    var lastname = localStorage.getItem("overallsum");
    localStorage.setItem("overallsum", sum);


 });

我还尝试将 var lastname = localStorage.getItem("overallsum"); 放在代码的开头，当第一个函数出现时却没有成功。

非常感谢您的帮助!对于任何格式问题，我深表歉意，我对此非常陌生。

Answer 1

每次单击事件时，overallsum 都会设置，这就是问题所在。如果 overallsum 是一次性存储到本地存储，那么您可以检查 overallsum 的值是否为 null，如果是，则存储第一次值。

例子:

if (localStorage.getItem("overallsum") === null) {
  localStorage.setItem("overallsum", sum);
}

否则，如果 overallsum 是某物，那么对于每篇文章，您可以使用二维数组，然后使用相同的条件检查设置值。