Можно ли добавить элемент HTML и все его значения в localStorage?

Question

Я создаю небольшую игру на JavaScript и хочу реализовать поле для оценки.
Я пытаюсь сделать это;каждый раз, когда пользователь выигрывает, добавьте оценку 5 в localStorage и отобразите ее в окне оценки.
Если пользователь снова выигрывает, увеличьте счет в localStorage +5 и отобразите обновленный счет.

Я создал ScoreBox.Я также установил оценку 5 для локального хранилища, и каждый раз, когда пользователь выигрывает, 5 отображается в ScoreBox

// Вот поле для оценки

let scoreBox = document.createElement('button');
scoreBox.className = "button-primary"
scoreBox.disabled = "true"
scoreBox.style.fontSize = "20px";
game.appendChild(scoreBox);

// Вот какЯ установил счет

if(typeof(Storage) !== "undefined") {
   localStorage.setItem('score', 5)
   let score = localStorage.getItem('score');
   scoreBox.innerText = score;
} else {
  console.error('Local Storage not supported!')
}

Теперь счет отображается каждый раз, когда пользователь выигрывает, но если я обновлюсь, значение 5 в ScoreBox не останется, но останется в localStorage.
MyТеперь вопрос в том, как я могу сохранить весь ScoreBox или, скорее, как сделать так, чтобы ScoreBox и его textContent оставались в localStorage.

Я новичок в localStorage и не знаю, правильно ли я поступил,Я исследовал, но не смог найти возможный ответ, который наилучшим образом решает мою проблему.Можно ли сохранить HTML-элемент в localStorage?

Игра представляет собой простую игру с угадайкой чисел, демо здесь:
https://bolajiayodeji.github.io/brain-gym/

Полный исходный код здесь: https://github.com/BolajiAyodeji/brain-gym
PS: Я работаю над функцией ScoreBox, я еще не добавил ее в демоверсию.

Заранее спасибо!

Answer 1

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

Answer 2

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

´´´
    Let initialScore´=5
     function incrementScore () {
    /// add the increment to the gloabl initial score variable

    }

´´´

Затем вы можете установить и получить «Score form localStorage».

Надеюсь, это поможет.

Answer 3

Я не думаю, что это правильный подход (конечно, я могу ошибаться).Даже если игра проста, она очень вам поможет (и для более сложных игр), если вы сохраните все свои данные в состоянии или в типе контекста глобального объекта.

Вы можете настроить свое представление (html).в вашем случае), чтобы отобразить значение, которое он читает из этого глобального объекта.Имея в виду, что вы храните данные в localStorage, при каждой перезагрузке вы сможете правильно отображать обновленные данные.

Таким же образом, каждое обновление, которое вы делаете для этого объекта, может инициироватьобновление элемента, в котором оно отображается.Это даже поможет вам следить за изменениями, которые вы применяете, и удостовериться, что нет различий между тем, что хранится в localStorage, и тем, что пользователь видит в своем прогрессе.