Удаление и создание cookies в JavaScript: простой метод

Быстрый ответ

Для удаления куки следует установить для него время истечения срока действия, который уже произошло:

document.cookie = "cookieName=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Подобное действие делает куки устаревшим и приводит к его удалению.

Анализ процесса удаления куки

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

function deleteCookie(name) {
  // Устанавливаем "просроченную" дату для куки, создавая своеобразный временной парадокс
  document.cookie = name + '=; Max-Age=-99999999;';
}

С помощью функции deleteCookie можно удалить определённое куки по его имени. Важно также учесть атрибуты Path и Domain, которые указывались при создании куки.

Особенности удаления куки для различных путей

Если при создании куки был задан определённый путь, то и при удалении следует задать этот же путь, иначе куки не удастся удалить:

function deleteCookie(name, path = '/') {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=' + path;
}

Используйте deleteCookie('userName', '/app'), чтобы удалить куки, находящееся в директории /app.

Визуализация

Для наглядного представления процесса удаления куки рассмотрим следующий пример:

// Чтобы удалить куки, нужно сделать его срок действия истекшим
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Визуализируем ситуацию с куки следующим образом:

До: [🍪, 🍪, **👀**, 🍪]   // Куки под наблюдением, которое мы хотим удалить
После:  [🍪, 🍪, 🍪]        // Теперь куки под наблюдением исчезло без следа!

Итоговый шаг: Куки было уничтожено, история браузера стала чистой.

Учёт параметра домена

Если куки было установлено для определённого домена, то и удалить его следует с учётом данного параметра:

function deleteCookie(name, path = '/', domain) {
  let cookieStr = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=" + path;
  if (domain) {
    cookieStr += "; domain=" + domain;
  }
  document.cookie = cookieStr;
}

Для удаления куки, связанного с поддоменом, следует вызвать deleteCookie('userSession', '/', 'sub.example.com').

Особенности взаимодействия с разными браузерами

Следует помнить, что Internet Explorer не поддерживает параметр Max-Age, поэтому для удаления куки в данном браузере используйте expires. При этом не забывайте синхронизировать атрибуты куки, такие как Secure или HttpOnly, для сохранения контекста безопасности.

Особенности работы с AngularJS

Разработчики, работающие с AngularJS, могут воспользоваться сервисом $cookies для удаления куки:

$cookies.remove('cookieName');

Для корректной работы данного метода в вашем приложении на AngularJS необходимо подключить модуль ngCookies.

Полезные материалы

1. Свойство document.cookie – Web API | MDN — официальное руководство по работе с куки через API Document.cookie.
2. JavaScript и куки — доступное руководство по работе с куки в JavaScript.
3. Вопросы и ответы — форум для обсуждения методов удаления куки.
4. Куки, document.cookie — подробное руководство, раскрывающее особенности работы с куки, document.cookie и их безопасности.
5. "document.cookie" | Can I use... Support tables for HTML5, CSS3, etc. — таблица сведений о совместимости document.cookie с различными браузерами.
6. Урок по работе с куки на YouTube — визуальный урок по работе с куки на JavaScript.