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

您没有正确使用localStorage setItem。

localStorage.setItem(users, score);

setItem()的两个参数都必须是字符串，第一个参数为键，第二个参数为要存储的值。您的第一个参数是一个数组（第二个参数的数据类型不清楚）。

setItem第一个参数的典型值：“ usersScores”。

localStorage.setItem('usersScores', JSON.stringify(score));

请注意使用JSON.stringify()将score转换为字符串，因为localStorage仅以字符串形式存储数据。

您还没有正确使用getItem：

localStorage.getItem(score)

getItem必须用setItem中使用的键来调用：

localStorage.getItem('userScores')

由于score已另存为字符串，因此当您从localStorage读取它时，需要将其转换回去：

score = JSON.parse(localStorage.getItem('userScores'))

localStorage的使用方法在MDN网络文档Using the Web Storage API中有明确说明。

Answer 3

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

localStorage.setItem('users', JSON.stringify(score))
JSON.parse(localStorage.getItem('users'))

这样，在设置为localStorage之前和之后，您应该具有相同的数据。

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

3 个答案: