Работа с бисквитки в JavaScript: Практическо ръководство

В днешния свят на уеб разработката понякога срещаме думата „бисквитка“ (cookie). Мнозина може да се притесняват от нея, но всъщност това е много полезна и безобидна технология. В това ръководство ще разберете какво представляват бисквитките, как се използват в JavaScript и кои по-съвременни алтернативи съществуват. Ще ви помогнем да работите с тях лесно и сигурно! 🚀

Съдържание

Какво е бисквитка? 🍪

Бисквитката е малък текстов файл, който уебсайтът записва на вашия компютър. Тя съхранява малко количество информация. Например, кой сте, предпочитанията ви или какво сте добавили в количката за пазаруване.

Защо са полезни бисквитките?

Позволяват на сайтовете да „помнят“ потребителя.
Помагат при персонализация, като показват подходящо съдържание.
Улесняват входа в сайта без многократно въвеждане на парола.
Съхраняват настройки, които сте направили.

Не трябва ли да се страхуваме от бисквитки? 🤔

Бисквитките сами по себе си не са опасни. Те не съдържат вируси или зловреден код. Те са просто текстови файлове, които се използват за подобряване на потребителското изживяване.

Важното е как уебсайтовете използват тези бисквитки. Затова е добре да бъдете внимателни с личната си информация и да използвате сайтове, на които имате доверие.

Как работят бисквитките? 🔍

Всеки път, когато посетите сайт, браузърът ви получава инструкции да създаде бисквитка. Тази информация се изпраща обратно към сървъра при следващи посещения. Така сайтът разбира, че вие вече сте посетили.

Например: ако сте влезли в профила си, сайтът запомня това и не ви кара да се логвате отново при всяко посещение.

Създаване, четене и изтриване на бисквитки с JavaScript 📜

JavaScript предоставя прост начин да управлявате бисквитките чрез обекта document.cookie.

Как да създадем бисквитка?

document.cookie = "username=Petar; expires=Fri, 31 Dec 2026 23:59:59 GMT; path=/";

username=Petar — име и стойност на бисквитката.
expires — дата, когато бисквитката изтича. Ако не се зададе, бисквитката е сесийна (изтрива се при затваряне на браузъра).
path=/ — указва пътя на сайта, за който важи бисквитката.

Как да прочетем бисквитка?

console.log(document.cookie);

Това връща всички бисквитки за текущия сайт като текст, например:

username=Petar; theme=dark

За да намерим конкретна бисквитка, трябва да я обработим като низ.

Пример за функция, която чете бисквитка по име:

function getCookie(name) {
  let cookies = document.cookie.split('; ');
  for(let cookie of cookies) {
    let [key, value] = cookie.split('=');
    if(key === name) return value;
  }
  return null;
}

console.log(getCookie('username'));  // Ще върне 'Petar'

Как да изтрием бисквитка?

Изтриването става като зададем изминала дата:

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

Това кара браузъра да премахне бисквитката с име username.

Практически съвети за работа с бисквитки ⚙️

Винаги задавайте path, за да ограничите обхвата.
Използвайте Secure и HttpOnly флагове на сървъра за по-добра сигурност.
Не съхранявайте чувствителни данни като пароли в бисквитки.
Проверявайте срока на валидност — нека не е прекалено дълъг.

Модерни алтернативи: localStorage и sessionStorage 📦

Бисквитките не са единственият начин да съхраняваме данни в браузъра. Днес има и други удобни методи:

localStorage

Съхранява данни за неопределено време.
Данните остават дори след затваряне и повторно отваряне на браузъра.
Работи само с низове (strings).
Максимален обем около 5MB.

localStorage.setItem('username', 'Petar');
console.log(localStorage.getItem('username'));  // Petar
localStorage.removeItem('username');

sessionStorage

Съхранява данни само за текущата сесия на браузъра.
Данните се изтриват, когато затворите прозореца или таба.
Също е ограничен до около 5MB.

sessionStorage.setItem('cart', '3 items');
console.log(sessionStorage.getItem('cart'));
sessionStorage.clear();  // Изтрива всички данни

Какво е по-добре: бисквитки или localStorage? 🤔

Характеристика	Бисквитки	localStorage/sessionStorage
Максимален размер	Около 4KB	Около 5MB
Автоматично изпращане	Да, при всяка HTTP заявка	Не, достъпни само от JavaScript
Срок на валидност	Задава се	localStorage: постоянно, sessionStorage: сесийно
Сигурност	По-ниска, лесно може да бъде прочетена от сървъра	По-сигурно, не се изпраща към сървъра автоматично

Бисквитките са задължителни, когато трябва да изпращаме информация към сървъра.
localStorage е удобен за големи и бързи данни, които остават в браузъра.

Пример: Управление на потребителски настройки

Да кажем, че искате да запазите дали потребителят предпочита тъмен или светъл режим на сайта.

С бисквитки:

// Записване
document.cookie = "theme=dark; path=/; expires=Fri, 31 Dec 2026 23:59:59 GMT";

// Четене
function getCookie(name) {
  let cookies = document.cookie.split('; ');
  for(let cookie of cookies) {
    let [key, value] = cookie.split('=');
    if(key === name) return value;
  }
  return null;
}

let theme = getCookie('theme');
if(theme === 'dark') {
  document.body.classList.add('dark-mode');
}

С localStorage:

// Записване
localStorage.setItem('theme', 'dark');

// Четене
let theme = localStorage.getItem('theme');
if(theme === 'dark') {
  document.body.classList.add('dark-mode');
}

localStorage е по-лесен и няма нужда от парсване на текст, но бисквитките могат да изпратят тази информация и на сървъра, ако е нужно.

Защо уеб разработчиците все още използват бисквитки? 🧑‍💻

Те работят с почти всички браузъри.
Позволяват проследяване на сесии и автентикация.
Сървърът може да ги чете и записва.
Не всички уеб технологии поддържат localStorage (напр. сървърни скриптове).

Защо трябва да сме наясно с бисквитките? 📢

Създаването и използването на бисквитки е важна част от съвременния уеб. С тях могат да се подобрят сайтовете и услугите.

Понеже бисквитките могат да съхраняват лични данни, трябва да сте информирани и да имате контрол.

Затова повечето сайтове ви уведомяват за използването на бисквитки и ви дават опция да ги приемете или откажете. Това е нещо добро — позволява ви да избирате.

Заключение и съвети за начинаещи 👍

Не се страхувайте от бисквитките. Те са просто текстова информация, улесняваща потребителското изживяване.
Използвайте document.cookie за базова работа с бисквитки в JavaScript.
За по-големи и по-бързи данни помислете за localStorage или sessionStorage.
Винаги мислете за сигурността и личните данни на потребителите.
Четете и следвайте законодателството за личните данни и бисквитките (напр. GDPR).
Тествайте на различни браузъри и устройства.

Бонус: Полезни ресурси за по-нататъшно учене 📚

Често задавани въпроси (FAQ) ❓

1. Колко време се съхраняват бисквитките?
До дата, зададена в expires. Ако няма такава, бисквитката е сесийна.

2. Могат ли бисквитките да крадат информация?
Не, сами по себе си не могат. Но сайтът може да използва лични данни, ако не е защитен.

3. Мога ли да изтрия всички бисквитки наведнъж?
Не директно с JavaScript, но можете да изтривате по една, като зададете изтекъл срок.

Надявам се това ръководство да ви е полезно! Ако имате въпроси, питайте! 😄

Федя Серафиев

Федя Серафиев e собственик на уебсайта urocibg.eu. Той намира удовлетворение в това да помага на хората да решават и най-сложните технически проблеми. Сегашната му цел е да пише лесни за следване статии, така че подобни проблеми изобщо да не възникват.

Благодарим ви за прочитането на статията! Ако намерихте информацията за полезна, можете да дарите посредством бутоните по-долу:

Donate ☕️ Дарете с PayPal Donate 💳 Дарете с Revolut