仅当数字较高时才在本地存储中设置分数

Question

嗨，我正在尝试找到一种使用本地存储来保存高分的方法，我有一个简单的脚本，可以在用户每次玩游戏时设置分数。

      localStorage.score = $(".score").text();
      $(".highscore").text(localStorage.score);

但是我现在想对其进行扩展，它只会在出现新的高分时更新分数，并设置达到分数的日期。谢谢

Answer 1

您需要知道您想要存储的位置，在单独的存储项目中，或者将其更改为一个对象并添加将保存分数和日期的值。

然后在使用 localStorage 时，要正确插入 JS object，它必须转换为 JSON: JSON.stringify()，然后在检索时只需解析它: JSON.parse()

这是一个工作示例：

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="score">35</div>
<div class="highscore"></div>
<div class="highscore-date"></div>

JS:

$(function() {
    let date = new Date();
    localStorage.score =
        localStorage.score ?
            Number($(".score").text()) > JSON.parse(localStorage.score).score ?
                JSON.stringify({
                    "score": $(".score").text(),
                    "date": `${date.toDateString()} at ${date.toLocaleTimeString()}`
                })
            : localStorage.score
        : JSON.stringify({
            "score": $(".score").text(),
            "date": `${date.toDateString()} at ${date.toLocaleTimeString()}`
        })
    $(".highscore").text(JSON.parse(localStorage.score).score);
    $(".highscore-date").text(JSON.parse(localStorage.score).date);
});

此脚本首先检查本地存储中是否设置了评分项。如果存在，则首先将分数值转换为 Number 因为它是作为字符串读取的，然后检查它是否大于当前值，并相应地更新

这里使用一个对象将分数和日期的值保存在同一个存储项中

编辑：

JSON.stringify({
   "score": JSON.parse(localStorage.score).score,
   "date": JSON.parse(localStorage.score).date
})

折射为localStorage.score

仅当数字较高时才在本地存储中设置分数

Set score in local sotrage only if a higher number

html

jquery

local-storage