无法访问存储在本地存储中的分数的值

Question

当尝试从等于用户正确回答多少个问题的变量访问localStorage中存储的得分值时，我遇到了问题。我认为这与设置值完全相同，但是很可能我做错了什么，而且我缺乏经验来弄清楚。]

我想在完成按钮所在的屏幕记分板上显示用户的分数。我很容易用localStorage行将乐谱设置到setItem(users, score)中，但是当我想设置getItem(score)时似乎displayUser.textContent = getItem(score)不起作用。

我尝试了许多不同的方法，并且我总是得到null。我还注意到，每次我向记分板提交新条目时，键的名称都会保留最后一个条目的名称，并将其存储在末尾。

我很想自己解决这个问题，但是在3个小时没有取得任何进展或取得任何领先优势之后，我想我可能会寻求帮助。我在新手训练营的班级活动中重复使用并更改了很多此代码，因此在开发过程中，只需单击完成按钮即可删除条目。

希望这里是所有相关的JavaScript

//Variables to Shorten text
var startButton = document.getElementById('startbtn')
var nextButton = document.getElementById('nextbtn')
var finishEarlyButton = document.getElementById('finishEarlyBtn')
var introSection = document.getElementById('intro')
var questionSection = document.getElementById('Question-Section')
var questionElement = document.getElementById('question')
var answerButtons = document.getElementById('Answer-Section')
var scoreboard = document.getElementById('Score-Container')
var userScore = document.getElementById('Score')
var seeScoreBtn = document.getElementById('seeScore')
var restartBtn = document.getElementById('restart')
var finishbtn = document.getElementById('finishbtn')
var userAnswer = ""

var shuffledQuestions, currentQuestionIndex
var score = 0

var userName = document.getElementById('scoreboard-input')
var leaderboard = document.getElementById('leaderboard')
var leaderboardUsers = document.getElementById('leaderboardUsers')

var users = [];

init();

function init() {
    var storedUsers = JSON.parse(localStorage.getItem("Users"))
    if (storedUsers !== null) {
        users = storedUsers;

        renderUsers();
    }
}

function renderUsers() {
    leaderboardUsers.innerHTML = "";

    for (var i = 0; i < users.length; i++) {
        var user = users[i];

        var li = document.createElement("li");
        li.textContent = user;
        li.setAttribute("data-index", i);

        var button = document.createElement("button");
        button.textContent = "Complete";

        var displayUser = document.createElement("button");
        displayUser.textContent = (localStorage.getItem(score));
        //displayUser.textContent = "test";
        console.log(localStorage.getItem(users.value))

        li.appendChild(displayUser);
        li.appendChild(button);
        leaderboardUsers.appendChild(li);
    }
}

function storeUsers() {
    //localStorage.setItem("users", JSON.stringify(users));
    //localStorage.setItem(JSON.stringify(users), JSON.stringify(score));
    localStorage.setItem(users, score);
}

leaderboard.addEventListener("submit", function() {
    event.preventDefault();

    var userText = userName.value.trim();
    var userCorrectAnswers = score.value;

    if (userText === "") {
        return
    }

    //users.push(userCorrectAnswers);
    users.push(userText);
    userName.value = "";

    storeUsers()
    renderUsers()
    console.log
})

leaderboardUsers.addEventListener("click", function(event) {
    var element = event.target;

    if (element.matches("button") === true) {
        var index = element.parentElement.getAttribute("data-index");
        users.splice(index, 1);

        storeUsers();
        renderUsers();
    }
})

让我知道是否需要html或JS的其余部分！

Answer 1

仅通过查看代码，我们可以看到您正在通过以下方式访问它

var storedUsers = JSON.parse(localStorage.getItem("Users"))

并通过]存储>

localStorage.setItem(users, score);
[使用访问方式，您可以通过以下方式进行设置

localStorage.setItem("Users", JSON.stringify(users));
这是区分大小写的，这可能就是为什么在users函数下的第一个注释中尝试使用键storeUsers无效的原因。

Answer 2

这是很多代码，但是设置和获取项目需要字符串键名和字符串值：

Answer 3

您没有正确使用localStorage setItem。