Блог

Главная - Вопросы по программированию - Я не знаю, как сохранить локальное хранилище при обновлении страницы

Я не знаю, как сохранить локальное хранилище при обновлении страницы

#javascript #reactjs #local-storage #page-refresh

Вопрос:

Я объясняю свою проблему: я играю в вопросы раундами с react и JS, когда вы правильно выполняете раунд, страница обновляется, и в зависимости от количества раундов, которые у вас есть, вы переходите к другому вопросу большей сложности.

Проблема возникает здесь: в Доме.Файл JS, который я объявил локальным хранилищем, так что он всегда равен 0 (когда вы терпите неудачу, вопрос приводит вас домой, и раунды сбрасываются на 0):

 localStorage.setItem("numRounds", 0)

В вопросе.Файл JS, когда я нажимаю на вопрос, введите метод validateQuestion, здесь я получаю домашнее локальное хранилище, равное 0, затем я создаю переменную, в которой сохраняю данные локального хранилища, и добавляю счетчик для каждого правильного вопроса 1 (Повышает уровень сложности вопроса), а затем сохраняю его в локальном хранилище, добавляя переменную, которую я создал (Используя console.log, мы можем проверить, что все идет идеально):

 validateQuestion(e){
        var answerUser = e.currentTarget.innerHTML;
        var answercorrect = this.state.question.Answer_Correct //(This is api does not matter to the 
        problem)
        if (answercorrect == answerUser){
            alert("CORRECT")
            var numRounds = localStorage.getItem("numRounds");
            console.log(numRounds);
            numRounds  
            localStorage.setItem("numRounds", numRounds);
            console.log(localStorage.getItem("numRounds"));
            window.location.assign("http://localhost:3000/question");
        }
        else{
            alert("FAIL")
            window.location.assign("http://localhost:3000/");
        }
    }

Но когда я обновляю страницу, локальное хранилище возвращается к номеру 0, и оно не будет сохранено правильно, так что я повышаю сложность вопросов (то есть с помощью другого метода) .. Есть какое-нибудь решение этой проблемы?

Приветствую и благодарю!

Комментарии:

1. это может быть что-то вроде строки/числа. Попробуйте это изменить: var numRounds = Number(localStorage.getItem("numRounds"));

2.вы написали эту строчку в componentdidmount или useEffect localStorage.setItem("numRounds", 0) , если бы вы написали. Он будет сброшен при повторной загрузке страницы

3. Я сделал «componentWillMount ()» (я не знаю, будет ли это то же самое или нет), но строка отсутствует, это больше, чем ничего, у меня есть для вызова API и выбора вопроса

Ответ №1:

В локальном хранилище могут храниться только строки для каждого ключа. Его нужно преобразовать обратно в число, когда вы его прочитаете, чтобы его можно было правильно добавить.

 var numRounds = Number(localStorage.getItem("numRounds"));
numRounds   ;

Комментарии:

1. Я сделал это как есть и ничего, локальное хранилище будет сохранено, но когда я обновлю страницу (с окном. местоположение.назначьте («http: //localhost:300/вопрос»)), чтобы получить другой вопрос, он снова останется на 0.

Метки: ,