Работа с #хэшем в url + history api

Последний проект, который я делал состоит из одной страницы, и все действия выполняются через Ajax.
Конечно, понадобилось сохранять состояние страницы, и самое универсальное решение — хэш.

Если кто не в курсе, хэшем url зовется всё, что идет после символа #. Изначально это было придумано для якорей и используется до сих пор всякими способами из-за одной особенности — изменение хэша не обновляет страницу.

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

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

Поэтому я написал простенький объект, методы которого позволили мне удобно работать с хэшем. Предлагаю его вам:

Hash = {
	// Получаем данные из адреса
	get: function() {
		var vars = {}, hash, splitter, hashes;
		if (!this.oldbrowser()) {
			var pos = window.location.href.indexOf('?');
			hashes = (pos != -1) ? decodeURIComponent(window.location.href.substr(pos + 1)) : '';
			splitter = '&';
		}
		else {
			hashes = decodeURIComponent(window.location.hash.substr(1));
			splitter = '/';
		}

		if (hashes.length == 0) {return vars;}
		else {hashes = hashes.split(splitter);}

		for (var i in hashes) {
			if (hashes.hasOwnProperty(i)) {
				hash = hashes[i].split('=');
				if (typeof hash[1] == 'undefined') {
					vars['anchor'] = hash[0];
				}
				else {
					vars[hash[0]] = hash[1];
				}
			}
		}
		return vars;
	},
	// Заменяем данные в адресе на полученный массив
	set: function(vars) {
		var hash = '';
		for (var i in vars) {
			if (vars.hasOwnProperty(i)) {
				hash += '&' + i + '=' + vars[i];
			}
		}

		if (!this.oldbrowser()) {
			if (hash.length != 0) {
				hash = '?' + hash.substr(1);
			}
			window.history.pushState(hash, '', document.location.pathname + hash);
		}
		else {
			window.location.hash = hash.substr(1);
		}
	},
	// Добавляем одно значение в адрес
	add: function(key, val) {
		var hash = this.get();
		hash[key] = val;
		this.set(hash);
	},
	// Удаляем одно значение из адреса
	remove: function(key) {
		var hash = this.get();
		delete hash[key];
		this.set(hash);
	},
	// Очищаем все значения в адресе
	clear: function() {
		this.set({});
	},
	// Проверка на поддержку history api браузером
	oldbrowser: function() {
		return !(window.history && history.pushState);
	},
};

Внимание! Объект был переписан и работает теперь через history api, по возможности. Если нет — то через хэш, как раньше.
Это означает, что в современных браузерах будут прямые адреса типа

test.ru/?var1=1&var2=2

А в IE8 и ниже

test.ru/#var1=1&var2=2

Метод Hash.oldbrowser() определяет режим работы. Вы можете перезагружать страницу при переходе на адрес с хэшем, если нужно:

if (window.location.hash != '' && Hash.oldbrowser()) {
	var uri = window.location.hash.replace('#', '?');
	window.location.href = document.location.pathname + uri;
}

Так, например, работает mSearch2 при фильтрации.

Сохраняем это в javascript файл, и можно пользоваться методами Hash.get(), Hash.set() и т.д.

Теперь пример использования. Предположим, мы хотим, чтобы при клике на ссылку с классом alert у нас происходило событие — окно с алертом:

$(document).on('click', 'a.alert', function(e) {
	alert('Событие!');
});

А теперь мы хотим дать прямую ссылку на этот алерт, чтобы любой, кто по ней перейдет увидел его, без клика:

// Обрабатываем клик по сслылке
$(document).on('click', 'a.alert', function(e) {
	Hash.add('event', 'alert');	// добавляем в хэш #event=alert
	alert('Событие!');
});
// Проверяем, что есть в хэше при загрузке страницы
$(document).ready(function() {
	var hash = Hash.get();	// получаем все значения
	if (hash.anchor) {
		window.location.hash = hash.anchor; // сохраняем родной функционал якорей
	}
	else if (hash.event == 'alert') {	// если есть событие alert - как бы кликаем по нужной ссылке
		$('a.alert').trigger('click');
	}
})

Вот так просто. Код для сохранения статуса табов:

// Обработка табов
$(document).on('click', '.nav a[data-toggle="tab"]', function (e) {
	e.preventDefault();
	var href = $(this).attr('href').substr(1);
	Hash.add('tab', href);
});
// Переключение таба при загрузке страницы
$(document).ready(function() {
	var hash = Hash.get();
	if (hash.tab) {
		$('.nav a[href="#' + hash.tab + '"]').trigger('click');
	}
})

http://modx.pro/development/520/#cut=undefined/tab=tickets