Как записать и прочитать cookie

Короткий ответ

Присвоение в document.cookie добавляет или обновляет одну cookie. max-age задаёт время жизни в секундах:

document.cookie = `theme=${encodeURIComponent('dark')}; max-age=${60 * 60 * 24 * 30}; path=/`;

Чтение по имени

document.cookie возвращает все cookie одной строкой вида a=1; b=2. Разбейте её и найдите нужную:

function getCookie(name) {
  const pair = document.cookie.split('; ').find((item) => item.startsWith(name + '='));
  return pair ? decodeURIComponent(pair.slice(name.length + 1)) : null;
}
 
const theme = getCookie('theme');

Как работает разбор

Тот же код на обычной строке:

const cookies = 'theme=dark; lang=en; cart=%5B1%2C2%5D';
const getCookie = (name) => {
  const pair = cookies.split('; ').find((item) => item.startsWith(name + '='));
  return pair ? decodeURIComponent(pair.slice(name.length + 1)) : null;
};
 
console.log(getCookie('lang'));
console.log(getCookie('cart'));
console.log(getCookie('token'));

Результат:

en
[1,2]
null

Удаление

Чтобы удалить cookie, запишите её снова с max-age=0 и тем же path:

document.cookie = 'theme=; max-age=0; path=/';

Частая ошибка

document.cookie = ... не перезаписывает все cookie, а меняет только одну. А cookie с флагом HttpOnly, обычно сессия входа, JavaScript вообще не видит.

document.cookie = 'a=1';
document.cookie = 'b=2';
// document.cookie is now 'a=1; b=2'