使用本地存储制作排行榜但不保存

Question

我正在开发一个记忆游戏网络应用程序，我正在尝试使用表格创建排行榜，代码如下所示：

function scoreLeaderboard() {
  let name = prompt('What is your name?');
  localStorage.setItem('name', name)
  localStorage.setItem('score', cardsWon.length);
  addToLeaderboard();
}

function addToLeaderboard() {
  leaderboard.innerHTML = `<li>${localStorage.getItem('name')} - ${localStorage.getItem('score')}`
  console.log(localStorage);
}

现在的问题是，当我重新加载页面时，分数消失并且本地存储被擦除，我该如何解决这个问题？另外，我想让它按顺序显示结果（从最高分到最低分），我也有兴趣制作它，这样你就可以快速完成它，但我真的不知道怎么做这样做。

Answer 1

window.localStorage 或 window.sessionStorage 可以做到这一点。不同之处在于sessionStorage 会在浏览器保持打开状态时持续存在，localStorage 会在浏览器重新启动后继续存在。持久性适用于整个网站，而不仅仅是其中的一个页面。

查看这些链接：（如果 this 代码段有问题，您会在这些链接中找到答案，但可能是其他部分的问题影响了这个.)

浏览器存储 - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

localStorage - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage

Answer 2

关于信息的持久化...

在scoreLeaderboard 函数上，您将覆盖之前注册的任何信息，因为正在设置键“名称”和“分数”，因此您可以尝试一些动态键命名，例如'name'+index，其中@987654323 @ 是随着新游戏的完成而动态更改的任何值。

关于结果的顺序...

在显示信息之前，您可以将 localStorage API 检索到的所有键放入一个数组中，按照您喜欢的方式对其进行排序，或者手动循环，或者使用loop() 类似的方法，然后将分数与名称联系起来。

关于完成快速奖励...

你可以得到一个玩家开始玩的时间变量

let startTime = Date.now();

然后在玩家完成时做同样的事情

let startTime = Date.now();

然后你可以减去它并检查它是否在你想要的任何规则内，比如如果玩家在 30 秒内完成，则奖励 X 分

if((startTime-finishTime) < 30000){ 
//Gives him X points 
}