HTML5 Web Storage - пример приложения

Веб-программирование --- HTML5 --- Web Storage - пример приложения

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

Возьмем, например, игру-лабиринт на основе Canvas, которую мы рассмотрели в статье "HTML5 Canvas - простая игра". На определенном этапе игры пользователь может отвлечься, но при этом он, вероятно, захочет не просто бросить игру, а сохранить ее текущее состояние, чтобы возобновить ее с этого момента. В таком случае имеет смысл сохранить текущее состояние игры, чтобы пользователь мог возвратиться к ней позже.

Существует несколько способов реализации такой возможности. Можно просто сохранять новую позицию после каждого хода. Поскольку локальное хранилище обладает высоким быстродействием, такой подход вполне реализуем. Либо можно реагировать на событие страницы onbeforeunload и запрашивать пользователя, не желает ли он сохранить текущее состояние.

Код, который предлагает сохранить информацию о состоянии игры, выглядит так:

window.onbeforeunload = function(e) {
	// Проверяем, существует ли объект localStorage (т.к. нет смысла 
	// предлагать сохранять состояние, если мы не сможем это сделать)
	if (localStorage)
	{
		// Выводим запрос о сохранении состояния
		if (confirm("Вы хотите сохранить позицию значка, \n" +
		   "чтобы загрузить ее при следующем входе в игру?")) {
			         localStorage["mazeGame_currentX"] = x;
			         localStorage["mazeGame_currentY"] = y;
	    }
	}
}

Используйте длинный ключ сохраняемых данных наподобие mazeGame_currentX. В конце концов разработчик должен обеспечить однозначность ключей, чтобы один и тот же ключ случайно не использовался двумя (или, еще хуже, несколькими) вебстраницами для сохранения разных фрагментов данных. При наличии только одного контейнера для сохранения всех данных породить конфликт ключей проще всего, что является одной из кричащих слабостей системы веб-хранилища. Во избежание подобного рода проблем следует разработать план для создания логичных и описательных ключей.

При следующей загрузке страницы можно проверить, существует ли эта информация:

  // Возможность локального хранилища поддерживается?
  if (localStorage) {
	  // Пытаемся получить данные
      var savedX = localStorage["mazeGame_currentX"];
      var savedY = localStorage["mazeGame_currentY"];
	  
	  // При нулевых значениях переменных не считываем никаких данных. 
	  // В противном случае устанавливаем новые координаты 
	  // по сохраненным данным
      if (savedX != null) x = Number(savedX);
      if (savedY != null) y = Number(savedY);
}

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