HTML5 Web Storage

cookies (куки) используется для хранения данных в браузере, но есть определенные недостатки, которые были решены с появлением HTML5 Web Storage.

Недостатки cookies

  • Ограничение размера хранилища файлов cookie в веб-браузерах, около 4Кб.
  • Cookies отправляются с каждым запросом HTTP, тем самым замедляя производительность веб-приложений.

Что такое HTML5 Web Storage?

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

HTML5 Web Storage имеет достаточно простой API для извлечения записи данных локального хранилища. Он может хранить до 10 Мб данных для одного домена. В отличие от файлов cookie, Web Storage не делает каждый раз запрос HTTP.

IE7 и более ранние версии не поддерживают HTML5 Web Storage. Все другие браузеры, Chrome, Opera, Firefox, Safari и IE8+ поддерживают HTML5 Web Storage.

Типы Web Storage

Local storage : Хранит данные без срока годности. Эти данные будут доступны даже если вкладки браузера открыты или закрыты.

Session storage Хранит данные за один сеанс. Материалы данных будут очищены, как только пользователь закроет браузер.

Обратите внимание, что в обоих типах Web Storage (веб-хранилище) не будет доступен на других браузерах. Потому что дынные веб-хранилища хранятся в активном браузере.

Пример Web Storage

Для лучшего понимания Web Storage смотрим пример. Это простая веб-страница пользователя, которая позволит нам изменить цвета фона страницы и размер шрифта в заголовке.



</pre>
<section><form onsubmit="javascript:setSettings()"><label>Выбрать цвет для фона: </label>
 <input id="favcolor" type="color" value="#ffffff" />
 <label>Select Font Size: </label>
 <input id="fontwt" type="number" max="14" min="10" value="13" />
 <input type="submit" value="Save" />
 <input onclick="clearSettings()" type="reset" value="Стереть" /></form></section>
<pre>



Функция  setSettings , которая вызывается из события формы onsubmit которое позволит нам сохранить выбранные пользователем данные в Local storage (локальное хранилище).

Перед тем, как мы используем данные, мы должны проверить, поддерживает браузер HTML5 Web Storage или нет.

Для этого используйте стандартный API или Modernizr, чтобы проверить совместимость браузера.



function setSettings() {
	if ('localStorage' in window && window['localStorage'] !== null) {
				//использовать Local Storage объект для хранения данных
	} else {
		alert('Данные не сохранятся, ваш браузер не поддерживает Local storage');
	}
}


Modernizr — это библиотека JavaScript, которая помогает нам определить браузеры с поддержкой HTML5 и CSS3. Для этого нужно скачать последнюю версию Modernizr и подключить библиотеку.



<script type="text/javascript" src=
http://pixelcom.crimea.ua/"modernizr.min.js"></script>
if (Modernizr.localstorage) {
 //use localStorage object to store data
} else {
 alert('Данные не сохранятся, ваш браузер не поддерживает Local storage');
}



setItem(‘key’,’value’) позволяет записать данные в локальное хранилище.

QUOTA_EXCEEDED_ERR исключение, если лимит хранилища превышает 5 Мб. Лучше всегда добавить блоки try/catch для хранения кода при сохранении данных.



function setSettings() {
if ('localStorage' in window && window['localStorage'] !== null) {
	try {
		var favcolor = document.getElementById('favcolor').value;
		var fontwt = document.getElementById('fontwt').value;
		localStorage.setItem('bgcolor', favcolor);
		localStorage.fontweight = fontwt;
	} catch (e) {
		if (e == QUOTA_EXCEEDED_ERR) {
			alert('Quota exceeded!');
		}
	}
	} else {
		alert('Данные не сохранятся, ваш браузер не поддерживает Local storage');
	}
}


Можно проверить хранятся ли данные в локальном хранилище, с помощью средств разработчика, которые поставляются с браузером. Например в Chrome, нажмите правой кнопкой мыши на веб-странице и выберите Просмотр кода элемента > Выберите вкладку «Ресурсы» пункт, на локальном диске. Вы увидите, выбранные пользователем данные, хранящиеся в виде пары ключ/значение.

Если изменить фон и размер шрифта приложения. Ключ getItem(‘Key’) покажет сохранённые данные. Поэтому некоторое время фон и размер шрифта приложения не изменится.



function applySetting() {
	if (localStorage.length != 0) {
	document.body.style.backgroundColor = localStorage.getItem('bgcolor');
	document.body.style.fontSize = localStorage.fontweight + 'px';
	document.getElementById('favcolor').value = localStorage.bgcolor;
	document.getElementById('fontwt').value = localStorage.fontweight;
	} else {
	document.body.style.backgroundColor = '#FFFFFF';
	document.body.style.fontSize = '14px'
	document.getElementById('favcolor').value = '#FFFFFF';
	document.getElementById('fontwt').value = '14';
	}
}


Функция length возвращает общее количество значений в зону хранения.

Приведенные выше функции могут быть вызваны во время onload события тега body следующим образом

<body onload="applySetting()">

Local storage может быть очищено с помощью функций clear() или removeItem(‘key’) . В примере ниже, функция вызывает событие click кнопки «очистить».



function clearSettings() {
		localStorage.removeItem("bgcolor");
		localStorage.removeItem("fontweight");
		document.body.style.backgroundColor = '#FFFFFF';
		document.body.style.fontSize = '14px'
		document.getElementById('favcolor').value = '#FFFFFF';
		document.getElementById('fontwt').value = '14';
}


Хранение событий

Когда мы установить или удалить данные из веб — хранилища, хранилище запустит событие объекта window . Мы можем добавить вызов событий и обработки хранения изменения, если это необходимо.



window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(event) {
		applySetting();
}


Событие объектов имеет следующие атрибуты

  • key — свойство, которое изменилось
  • newValue — новое заданное значение
  • oldValue — ранее сохраненное значение
  • url — полный адрес события, где оно произошло
  • storageArea — объекты localStorage или sessionStorage

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

Заключение

Уверен, теперь вы можете использовать HTML5 Web Storage, чтобы хранить настройки пользователя, информацию сеанса т.д. Вы также можете попробовать создать приложение, которое сможет работать полностью в автономном режиме, а данные хранящиеся во время автономной работы могут быть отправлены на сервер в виде пакета обновления, когда пользователь подключится к сети. Так же смотрите вариант хранение данных с помощью HTML5 AppCache и IndexedDB

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>