Наблюдение за внешним интерфейсом, файлы cookie на самом деле можно настроить следующим образом.

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

Манипулирование файлами cookie с помощью JS на самом деле очень проблематично, и нет простого API, позволяющего нам получать или устанавливать файлы cookie.

Единственный API, который манипулирует файлами cookie, — этоdocument.cookie, но этот код неудобно использовать. Если мы хотим получить требуемый файл cookie, нам, возможно, придется сначала написать такую ​​функцию utils:

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

Но в версии Chrome 87 нам больше не нужно вводить такой код, вместо этого у нас есть новый API:cookieStore. ЭтоасинхронныйAPI, вы можете легко получить настройки и отслеживать изменения файлов cookie.

Если вы хотите загрузить бета-версию Chrome, вы можете загрузить ее по адресуэта ссылкаполучено в.

Ниже приводится введение в новый контент.

получить печенье

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

cookieStore.getЕсть две сигнатуры функций, первую мы можем сопоставить с желаемым содержимым, передав атрибуты файла cookie, а вторая передается напрямую вnameПолучать. API очень интуитивно понятен, и я не знаю, чем он лучше предыдущего.

Конечно, в дополнение к получению одного файла cookie новый API также предоставляет способ получения нескольких файлов cookie. Например, теперь, если я хочу получить все файлы cookie, принадлежащие определенному домену, я могу использовать следующий метод:

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

Если нам нужно установить куки раньше, мы должны написать следующий аналогичный код, все еще работающийdocument.cookie

const setCookie = (name, value, days = 7, path = '/') => {
  const expires = new Date(Date.now() + days * 864e5).toUTCString()
  document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
}

Теперь мы можем пройтиcookieStore.setОчень удобно устанавливать куки:

setФункция поддерживает две подписи, первая может устанавливать содержимое всех файлов cookie, втораяkey-valueформа.

удалить куки

После получения и удаления файлов cookie необходима соответствующая операция удаления.

Перед этим, если вы хотите удалить файл cookie, вам необходимо установить время истечения срока действия файла cookie в прошлом, и он автоматически станет недействительным после истечения срока его действия.

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

Кажется странным, что попытка удалить файл cookie не удаляет поле, срок его действия истекает. Теперь, когда у нас есть новый API, нам не нужно этого делать:

такой же,deleteВ API также есть две сигнатуры функций: когда используется простая строка, она эквивалентна той, которая требует удаления файла cookie.name, при передаче объекта подпись немного отличается от предыдущей.Следует отметить, что все необязательные атрибуты в подписи имеют значения по умолчанию:

dictionary CookieStoreDeleteOptions {
  required USVString name;
  USVString? domain = null;
  USVString path = "/";
};

Прослушивать изменения файлов cookie

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

Когда мы устанавливаем или удаляем файл cookie, соответствующее событие выдает то, что мы изменили.

наконец

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

Серия наблюдателей за внешним интерфейсом посвящена новым API, спецификациям, технологиям и т. д., ориентированным на передний план. Хотя в краткосрочной перспективе мы можем не воспользоваться преимуществами этих API, однажды или полифилл нам использовать эти вещи.

Категории