Управление файлами cookie с помощью JavaScript

внешний интерфейс JavaScript

Автор: Ник Мейджор

Перевод: сумасшедший технический ботаник

оригинал:треска и ракетное топливо.com/article/how…

Копирование без разрешения строго запрещено

представлять

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

Так как же браузеры и веб-серверы запоминают информацию о пользователе? Файлы cookie были изобретены для решения этой проблемы.

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

Файлы cookie — это просто небольшие текстовые файлы, хранящиеся в браузере вашего компьютера. Они содержат следующие данные:

  1. Пара имя-значение для хранения данных
  2. По истечении даты срок действия файла cookie истекает.
  3. Домен и путь сервера, на который следует отправить

У файлов cookie также есть некоторые ограничения, о которых стоит упомянуть:

  • Каждый файл cookie имеет максимальный размер 4096 байт.
  • До 20 файлов cookie на домен (немного отличается в зависимости от браузера)
  • Файл cookie относится к своему домену (веб-сайт не может считывать файлы cookie с других доменов, только свои собственные).
  • Ограничение размера применяется ко всему файлу cookie, а не только к его значению.

В браузере файлы cookie передаются черезобъект документаопубликовано какdocument.cookies.

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

Давайте начнем!

содержание

  • Create Cookies
  • Read Cookies
  • Update Cookies
  • Delete Cookies

Create Cookies

Настроить файлы cookie в браузере с помощью JavaScript очень просто! Я покажу вам ниже.

установить куки

Вот исполняемый код, который создает новый файл cookie с помощью JavaScript в браузере:

document.cookie = "userId=nick123"

После запуска этого кода откройте браузер, и вы сможете найти файл cookie в приложении (Safari или Chrome) или хранилище (Firefox) в инструментах разработчика.

Установить срок действия куки

Вы также можете добавить время истечения срока действия (UTC) в файл cookie, чтобы указать браузеру, когда его следует удалить:

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC"

Установить путь для файлов cookie

Вы также можете указать браузеру, к какому пути относится файл cookie (по умолчанию это путь к текущей странице):

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user"

установить домен cookie

Последняя часть данных, которую мы рассмотрим, — это домен, к которому принадлежит файл cookie (по умолчанию текущий домен):

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com"

Read Cookies

пройти черезdocument.cookieобъект, и чтение файлов cookie с помощью JavaScript также очень просто:

Читать все файлы cookie одной страницы

Получить все файлы cookie для одной страницы в виде строки, разделенной точкой с запятой:

const cookies = document.cookie

Чтение файла cookie с определенным именем

Чтобы получить доступ к файлу cookie с определенным именем, нам нужно получить все файлы cookie на странице и проанализировать строку, а затем найти совпадение с именем файла cookie, которое мы ищем.

Вот функция, которая делает это с помощью регулярных выражений:

function getCookieValue(name) {
  let result = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)")
  return result ? result.pop() : ""
}

Вы используете функцию следующим образом:

getCookieValue("userId") //returns nick123

Это вернет то же самое, что и предоставленное функцииnameСтроковое значение, соответствующее параметру.

Если вы не освоили регулярные выражения, есть еще одна функция, которая делает то же самое:

function getCookieValue(name) {
  const nameString = name + "="
  
  const value = document.cookie.split(";").filter(item => {
    return item.includes(nameString)
  })
  
  if (value.length) {
    return value[0].substring(nameString.length, value[0].length)
  } else {
    return ""
  }
}

Используйте функцию таким же образом:

getCookieValue("userId") //returns nick123

Update Cookies

Вы можете изменить значение файла cookie, перезаписав его новым значением, создав его.

Вы можете переопределить файл cookie, созданный ранее в этой статье, с помощью этого кода."userId":

document.cookie = "userId=new_value"

когда ты снова бежишьgetCookieValueфункция, вернет новое значение:

getCookieValue("userId") //returns new_value

Delete Cookies

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

Если мы хотим удалить куки из предыдущего примера"userId", Следуй этим шагам:

document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"

Просто, верно?

Суммировать

Поздравляем! Теперь вы знаете, как устанавливать, читать, обновлять и удалять файлы cookie с помощью JavaScript! Надеюсь, это поможет вам в вашей работе по кодированию.

Добро пожаловать в общедоступную учетную запись внешнего интерфейса: Front-end Pioneer, получите бесплатный набор утилит для разработки внешнего интерфейса.

Категории