Как добавить или удалить Cookie с помощью JavaScript

Количество просмотров: 1061

Сегодня поработаем с Cookie силами JavaScript. "Для чего это можеть быть нужно?" - спросите вы. Да, для чего угодно, например мы вносим какие-то правки в код и не хотим, чтобы изменения были видны пользователям, очевидное решение сделать проверку на наличие куки у клиента, и если кука есть, то показывать наше изменения этому пользователю. Но как ее повесить только определенному пользователю? Для этого мы и будем использовать JavaScript.

Что такое Cookie?

Cookie(куки) - текстовые файлы ограниченные размером до 4кб, в которые браузер записывает данные полученные от веб серверов(сайтов на которые вы заходили). Могут содержать любую ифнормацию, но в основном хранят такие данные которые позволяют запоминать сайтам своих посетителей, например чтобы на запрашивать данные для авторизации или сохранить информацию о товарах добавленных в корзину. Хранятся данные фалйлы на стороне клиента.

Для работы с куками будем использовать свойство document.cookie предстовляющее собой строку состоящую из пар ключ=значение и разделяемых ; и пробелом между собой. Ниже приведен пример того, что выведет запущенный в консоли document.cookie.

document.cookie в консоли браузера

Как добавить свою куку силами JS.

Добавить свою куку очень просто. Выполним в консоли document.cookie = "user=Nikola"; Готово, наша кука добавлена. Теперь рассмотрим ряд важных настроек, нужно стараться их указывать, чтобы не использовать настройки по умолчанию.

1. path=/mypath - путь по которому будет доступны cookie, если не указывать, то возмется текущий путь и пути ниже него, поэтому в качестве значения возьмем path=/ т.е. корень, куки доступен со всех страниц сайта.

2. expires - Дата истечения жизни cookie в формате GMT. Если дату не указывать, то куки будут считаться ссессионными и будут удалены после закрытия браузера.

Напишем простую функцию для добавления cookie.


function setCookie(name, value, days, path) {
    
    path = path || '/'; // заполняем путь если не заполнен
    days = days || 10;  // заполняем время жизни если не получен параметр

    var last_date = new Date();
    last_date.setDate(last_date.getDate() + days);
    var value = escape(value) + ((days==null) ? "" : "; expires="+last_date.toUTCString());
    document.cookie = name + "=" + value + "; path=" + path; // вешаем куки
}

setCookie('user','Nikola', 2, '/'); // запустим функциию и добавим куки.

Как удалить куки с помощью JS.

Для удаления Cookie необходимо задать ей прошлую дату. Например воспользуемся нашей функцией setCookie(); и удалим нашу куку user;

setCookie('user','Nikola', -2, '/');

Кука удалена, но что делать если нужно удалить все куки какие есть? Для этого напишем новую функцию.


function deleteCookie() {
  var del_co = document.cookie.split(';');
  while(name = del_co.pop()) {
  setCookie(name.split('=')[0],'11', -20, '/');
  }
}

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх