Для пошаговой настольной игры в браузере, как перезагрузить страницу с изменениями в игре?

Question

Я новичок в Javascript и в качестве упражнения делаю браузерную версию настольной игры.

Поскольку я так новичок в мире HTML, мне бы хотелось узнать немного больше о том, как работают асинхронные игры на таких сайтах, как Boiteajeux.net.

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

Я мало что знаю о базах данных и о том, как их хранить, так что, возможно, в этом и заключается дыра в моих знаниях.

Я бы хотел, чтобы с каждым «ходом» в моей игре это было постоянным изменением веб-страницы, так что если я нажму кнопку «Обновить», он не вернется в состояние перед игрой.

Как это работает?

Answer 1

Если вы просто хотите локальное постоянное состояние между обновлениями, вы можете использовать localStorage. LocalStorage - это свойство только для чтения объекта хранения Document. В отличие от SessionStorage, срок хранения хранимых данных не истекает.

Вы можете установить ключевые элементы в локальном хранилище следующим образом:

localStorage.setItem('myKey', 'some data');

Вы можете прочитать сохраненный элемент следующим образом:

var myItem = localStorage.getItem('myKey');

Существуют также методы .remove('myKey') и .clear() для удаления элементов и очистки объекта хранения.

Предполагая, что ваше игровое состояние хранится в каком-либо объекте состояния, вы можете хранить заштрихованный объект при обновлении состояния.

Что-то вроде:

localStorage.setItem('gameState', JSON.stringify(currentState));

И получить доступ к состоянию при загрузке браузера следующим образом:

var currentState = JSON.parse(localStorage.getItem('gameState'));

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