Как работать с cookies и localStorage

В этой статье мы разберемся, как работать с cookies и localStorage в веб-разработке. Эти технологии позволяют хранить данные на стороне клиента и использовать их для различных целей, таких как аутентификация, настройки и сохранение состояния приложения.

Cookies

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

Создание и установка cookies

Создать и установить cookie можно с помощью JavaScript, установив значение document.cookie:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2021 12:00:00 UTC; path=/";

Здесь username — это имя cookie, John Doe — значение, expires — дата истечения срока действия, а path — путь, по которому cookie будет доступен.

Чтение cookies

Чтобы прочитать значение cookie, используйте свойство document.cookie:

var cookies = document.cookie;

Это вернет строку со всеми cookies, установленными для текущего домена. Вы можете разделить строку на отдельные cookies и найти нужное значение:

function getCookie(name) {
  var cookies = document.cookie.split(';');
  for(var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.indexOf(name) === 0) {
      return cookie.substring(name.length + 1);
    }
  }
  return "";
}

var username = getCookie("username");

Удаление cookies

Удалить cookie можно, установив значение expires в прошедшую дату:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

localStorage

localStorage — это другой способ хранения данных на стороне клиента. В отличие от cookies, данные в localStorage не передаются на сервер с каждым запросом. localStorage хранит данные без срока действия, и они доступны только на домене, на котором были созданы.

Сохранение данных в localStorage

Чтобы сохранить данные в localStorage, используйте метод setItem():

localStorage.setItem("username", "John Doe");

Чтение данных из localStorage

Чтобы прочитать данные из localStorage, используйте метод getItem():

var username = localStorage.getItem("username");

Удаление данных из localStorage

Чтобы удалить данные из localStorage, используйте метод removeItem():

localStorage.removeItem("username");

Очистка всего localStorage

Чтобы удалить все данные из localStorage, используйте метод clear():

localStorage.clear();

Теперь вы знаете, как работать с cookies и localStorage в веб-разработке. Эти технологии полезны для хранения данных на стороне клиента и могут быть использованы для различных задач, таких как аутентификация, настройки и сохранение состояния приложения. Удачи вам в изучении веб-разработки! 😉