Запоминание положения интерфейса с помощью ezCookie RUDEBOXОчень важным моментом в интерфейсе сайта является сохранение его текущего положения, для того, чтобы после перезагрузки страницы, пользователю не пришлось заново повторять свои действия с настройкой интерфейса сайта под себя. Идеальным средством для хранения состояния пользовательского интерфейса является cookies. Всем известно как работать с куки с помощью серверных (backend) языков,  но зачастую проще это делать напрямую из JavaScript. Конечно можно передавать данные интерфейса серверной части, а там уже сохранять их хоть в БД.

Если в вашем сайте уже используется JQuery, то наиболее простой способ наладить работу с cookies, это использовать плагин. Плагинов довольно много я обычно использую ezCookie. В плагине содержатся стандартные методы для работы с cookies – установка, чтение, удаление. На странице проекта есть детальное описание всех методов.

JavaScript и Cookies

В JavaScript есть стандартные методы для работы с document.cookie, именно так происходит обращение к куки в JavaScript. Например функция для установки куки будет выглядеть следующим образом

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

Запоминание положения интерфейса с помощью ezCookie | RUDEBOX

Сохранение положения интерфейса

Для этого воспользуемся стандартной JQuery функцией toggle (переключатель), которая в качестве аргументов принимает 2 функции, одна из которых срабатывает на четном щелчке мыши, другая на нечетном. Чтобы сохранить положение квадратов, мы в первой toggle функции будем устанавливать значение cookie в 0, а на второй функции в 1, ноль означает, что квадрат скрыт, а единица соответственно, что квадрат виден.

Здесь я использую функцию ezCookie $.setSubCookie, чтобы не увеличивать количество записей cookie. Так как структурно записи для каждого квадрата у нас равны, то все проще хранить в одной cookie с именем “ui_save”. В качестве дополнительных параметров метод $.setSubCookie позволяет установить время жизни cookies, но в данном случае используется время жизни по умолчанию.

Вот и все. Готово!

Читайте также: