javascript - 页面之间的 HTML5 本地存储

Question

所以我是 HTML5/JS 编程领域的新手，但我真的很想快速学习......我希望构建一个功能类似于 Jeopardy 游戏的网站，其主屏幕上有一个包含类别的表格和点值，单击后将超链接到问题页面。在主页上，我一直在寻找要点。我有一个文本框，编码为:

<input type="number" id="SamTotalPoint" value="0" readonly="readonly"/>

在问题页面上，我放置了一些按钮，这些按钮理想情况下可以使用本地存储将点添加到主页。该按钮编码为:

<input type="button" id="SamHist50" value="Team Sam" onclick="SamScoreKeeper(samPoint,50)"/>

现在我希望将两者联系起来。在外部 JS 上，我尝试将函数定义为:

   function SamScoreKeeper(samPoint,pointsToAdd)
{
    window.localStorage.setItem("SamTotalPoint", "0");
    var SamOldScore = parseInt(window.localStorage.getItem("SamTotalPoint"));
    window.alert(samPoint);
    window.alert(pointsToAdd);
    samPoint = samPoint + pointsToAdd
    var SamNewScore = samPoint;
    var SamTotalv = SamOldScore + SamNewScore
    window.alert(samPoint);
    window.history.back();
    document.getElementById("SamTotalPoint").value; = SamTotalv;
}

我把 Which 根本不起作用。我花了一段时间尝试研究它并加深对它的理解，但是在与它打交道大约 6-7 个小时并观看了一堆教程之后，我仍然无法理解它。这个页面只会在闪存驱动器上本地运行，而不是实际托管在服务器上，这就是为什么我希望本地存储可以解决问题而不是使用 PHP。窗口警报就在那里，所以我可以确保 JS 正在计算。有人可以帮我吗？将不胜感激!

Answer 1

当 localStorage 被修改时，一个 storage 事件将在共享存储的所有 other 页面上触发。您只需要处理事件，并检索更新的数据。这也适用于 sessionStorage。

document.addEventListener('storage', function(e) {
    // don't forget to take a look at the parameter - event object
    // update your page here, good luck
}, false);