HTML5 Web Storage

С появлением HTML5 мы получили 2 новых объекта для хранения локальных данных. Это localStorage и sessionStorage. Они работают практически идентично, с той лишь разницей, что в первом — данные хранятся всегда, а во втором — данные удаляются после потери сессии (например закрытия браузера). Сразу же возникает естественный вопрос — зачем они нужны, ведь есть Cookies?

В отличие от cookies я могу хранить довольно большие данные (по умолчанию — 5Mb, а в IE даже 10Mb). Эти данные не передаются в http запросах (cookie передаются вместе с запросами), тем самым увеличивая скорость работы сайта.  Следовательно Web Storage — отличная замена cookie. Что касается поддержки браузерами, то на момент написания данной статьи, из новых браузеров данную технологию не поддерживают только Opera Mini.

Поэтому для внедрения технологии Web Storage с поддержкой старых браузеров в свой проект можно использовать следующий код:

[codesyntax lang=»javascript» title=»JavaScript»]

var LocalData = {
	setLocalData: function (key, value) {
		var date,
		    year;
		if (this.isLocalStorageAvailable()) {
			localStorage.setItem(key, value);
		} else {
			date = new Date();
			year = date.getFullYear();
			this.setCookie(key, value, { expires: date.setYear(year + 1), path: '/' });
		}
	},
	getLocalData: function (key) {
		var value;
		if (this.isLocalStorageAvailable()) {
			value = localStorage.getItem(key);
		} else {
			value = this.getCookie(key);
		}
		return value;
	},
	deleteLocalData: function (key) {
		if (this.isLocalStorageAvailable()) {
			localStorage.removeItem(key);
		} else {
			this.setCookie(key, null, { expires: -1 });
		}
	},
	setCookie: function (key, value, props) {
		props = props || {};
		var exp = props.expires,
			d,
			updatedCookie,
			propKey,
			propValue;
		if (typeof exp === "number" && exp) {
			d = new Date();
			d.setTime(d.getTime() + exp * 1000);
			exp = props.expires = d;
		}
		if (exp && exp.toUTCString) {
			props.expires = exp.toUTCString();
		}
		value = encodeURIComponent(value);
		updatedCookie = key + "=" + value;
		for (propKey in props) {
			if (props.hasOwnProperty(propKey)) {
				updatedCookie += "; " + propKey;
				propValue = props[propKey];
				if (propValue !== true) {
					updatedCookie += "=" + propValue;
				}
			}
		}
		document.cookie = updatedCookie;
	},
	getCookie: function (key) {
		var matches = document.cookie.match(new RegExp("(?:^|; )" + key.replace(/([\.$?*|{}\(\)\[\]\\\/\+\^])/g, '\\$1') + "=([^;]*)"));
		return matches ? decodeURIComponent(matches[1]) : undefined;
	},
	isLocalStorageAvailable: function () {
		try {
			return (window.localStorage !== undefined);
		} catch (e) {
			return false;
		}
	}
}

[/codesyntax]

 

Методы работы с данными объекта LocalData проверяют поддержку Web Storage и в противном случае используют cookie.

Запись опубликована в рубрике JavaScript/JQuery с метками , . Добавьте в закладки постоянную ссылку.

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

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