Всем доброго времени суток и поехали. Чем же хороши куки? Да тем, что с помощью их мы можем хранить информацию на стороне клиента, то есть в его браузере. Более того мы хранить информацию определенное количество времени после истечения которого данная информация стереться.

Для начала давайте разберемся включены ли у вас куки в браузере, так как их можно отключать.

Делается это очень просто.

if (navigator.cookieEnabled) {
    alert( 'В вашем браузере Cookie включены' );
}else{
    alert('Включите пожалуста cookie');
}

здесь мы через объект navigator проверяем включены ли в вашем браузере cookie. Если да то едем дальше.

Для того чтобы получить все cookie нам достаточно прописать:

console.log(document.cookie);

C помощью свойства cookie объекта document мы получаем список всех наших доступных кук и выводим их в консоль. У меня к примеру кук пока нет, поэтому мне возвращается пустая строка.

Давайте создадим свою первую куку. Сделать это можно довольно просто:

document.cookie = "myFirstCookie=Hello world!";

Поздравляю мы создали куку. Cookie как правило лучше создавать в виде пары имя куки и ее значения. Здесь у нас именем является myFirstCookie, а значением строка Hello world!. Почему так стоит делать? Да потому что, если у нас кук несколько и нам необходимо получить значение одной из них, мы это можем сделать через ее имя.

Имя как бы является указателем через который мы можем обратится к нашей куке и получить ее значение. Пример:

document.cookie = "two=ok!";
console.log(document.cookie);

здесь мы создали еще одну куку и вывели все наше дело в консоль. В результате у нас в консоли вывелась строка с двумя нашими куками.

myFirstCookie=Hello world!; two=ok!

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

function getCookie(name){
    var arrayAllCookie =  document.cookie.split("; ");
        for(var i in arrayAllCookie){
            if(arrayAllCookie[i].split('=')[0] === name){
                return arrayAllCookie[i].split('=')[1]
            }
        }
}
console.log(getCookie('myFirstCookie'));

Мы создали функцию getCookie в качестве аргумента которой передаем имя куки значение которой хотим получить.

В результате мы получили Hello world!, то есть значение нашей первой куки, так как в качестве аргумента у нас указано ее имя.

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

var date = new Date(new Date().getTime() + 10 * 1000);
    document.cookie = "three=My three cookie; path=/; expires=" + date.toUTCString();

Здесь мы в переменную date запысиваем время когда наша кука будет удалена. В нашем случае она будет удалена через 10 секунд после создания.

Далее при создании куки устанавливаем ей имя three и значение 'My three cookie', после пишем следующее 'path=/; expires=' и указываем нашу переменную, приведенную к специальному формату UTC, с помощью метода toUTCString().

В результате время работы куки будет равно 10 секундам после истечения которых она будет не действительна(удалена).

Если мы хотим удалить куку вручную, допустим давайте удалим куку myFirstCookie:

console.log('Результат до: '+document.cookie);
    var date = new Date(0);
      document.cookie = "myFirstCookie=; path=/; expires=" + date.toUTCString();
    console.log('Результат после: '+document.cookie);

Как видите мы просто выставили текущее время в качестве окончания работы куки в результате чего она была удалена. Заметье что мы указали только имя куки и знак равно упустив значение. И в результате вывели список кук до удаления и после. Как видите мы успешно удалили куку с именем myFirstCookie.

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

function setCookie(name, value='',date='') {
            if(value == '' && date == ''){
            /*Если передан один аргумент мы удаляем куку с указанным именем*/
                var date = new Date(0);
                document.cookie = name+"=; path=/; expires=" + date.toUTCString();
                return false;
            }
            if(date == ''){
            /*Если передано два параметра создаем куку с заданными именем и значением, также можно используя имя уже созданной куки менять ее значение*/
                document.cookie = name+"="+value;
                return false;
            }
            /*Если переданы все три параметра, то мы также можем создавать куку и менять ее значения, в том числе третим параметром устанавливается время ее жизни в секундах*/
            var date = new Date(new Date().getTime() + date * 1000);
            document.cookie = name+"="+value+"; path=/; expires=" + date.toUTCString();

        }

Итак, весь код в функции я тщательно прокомментировал, поэтому пользуйтесь на здоровью.

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

Берегите вашу личную информацию!

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

На этом у меня все. Надеюсь я смог вам помочь в решении вашего вопроса. Желаю успехов и удачи! Пока!