Несмотря на то, что я работаю разработчиком уже более 25 лет, я никогда не имел дела с cookies. Еще во времена Perl я использовал скрытые поля для управления сессиями. Теперь, когда я использую express-session, я решил, что было бы неплохо поближе познакомиться с cookies. Это оказалось сложнее, чем я думал.
Обычно cookies создаются сервером, и если сервер включает флаг HttpOnly, то JS-код вашего браузера даже не сможет увидеть cookies. Но мне нравится делать демонстрации, которые работают в вашем браузере.
Cookies представлены в JS объектом document.cookie. Выполнение console.log(typeof document.cookie) возвращает строку, но это не строка. Это объект с геттерами и сеттерами.
Очень легко добавить cookie в браузер — document.cookie = 'cookie1=New Cookie!'. И очень легко изменить его — document.cookie = 'cookie1=Новое значение.'. Удаление — это совсем другое дело.
На самом деле вы не удаляете куки, вы истекаете срок их действия. В большинстве примеров, которые я нашел, говорится, что вы должны использовать некоторую вариацию команды
let date = new Date(0);
document.cookie = 'cookie1=; expires='+date.toUTCString();
Но я считаю, что установка max-age проще.
document.cookie = 'cookie1=; max-age=0';
Я узнал кое-что интересное: у вас может быть несколько файлов cookie с одинаковым именем и разными значениями.
document.cookie = 'cookie1=root; path=/';
document.cookie = 'cookie1=parent; path=/Parent';
document.cookie = 'cookie1=cwd;';
console.log(document.cookie);
Если вы передадите предыдущий код браузеру с именем /Parent, то на выходе должно получиться cookie1=cwd; cookie1=parent; cookie1=root.
Здесь есть несколько сложных моментов. Во-первых, вы не можете использовать произвольное значение для path. Это должен быть фактический путь в document.location.pathname. Во-вторых, хотя document.cookie вернет все файлы cookie, он не скажет вам, какой из них связан с каким путем. Куки расположены в порядке возрастания от самого длинного до самого короткого пути. Вы можете сделать что-то вроде let cookies = document.cookie.split('; '), и массив будет расположен в порядке возрастания (проверено на Chrome, Firefox и Safari).
Чтобы изменить или удалить конкретный файл cookie, необходимо указать соответствующий путь к нему.
document.cookie = `cookie1=NewValue; path=/;`;
document.cookie = `cookie1=; path=/; max-age=0;`;
Вы не можете изменить путь к cookie.
Следует отметить, что выполнение команды document.cookie = 'cookie1=New Cookie!' — это плохая форма. Вы должны кодировать данные следующим образом — document.cookie = 'goodCookie=' +encodeURIComponent('data to encode'). Это позволит вам использовать точки с запятой в ваших данных.
Ну, этого достаточно для начала работы. У меня есть еще куча рабочих примеров на https://sean.brunnock.com/Javascript/Cookies/. Надеюсь, вы найдете их полезными.