Jak przechowywać dane w plikach cookie?

Jak przechowywać dane w plikach cookie? Zapis w przeglądarce

Zrozumienie jak przechowywać dane w plikach cookie pozwala na poprawne zarządzanie sesjami użytkowników w przeglądarkach internetowych. Poznaj mechanizmy bezpiecznego zapisu informacji bez ryzyka utraty sesji. Przeczytaj artykuł, aby dowiedzieć się więcej o konfiguracji parametrów.

Jak przechowywać dane w plikach cookie?

Jeśli zastanawiasz się, jak zapisywać pliki cookie javascript, warto wiedzieć, że przechowywanie danych w przegladarce ciasteczka w czystym JavaScript opiera się na interfejsie document.cookie, który działa specyficznie, przypominając zwykły ciąg tekstowy zamiast tradycyjnego obiektu. Aby zapisać ciasteczko, należy przypisać do niego odpowiednio sformatowany ciąg znaków zawierający nazwę, wartość oraz opcjonalne atrybuty bezpieczeństwa i ważności.

Podstawowa składnia zapisu ciasteczek

Najprostszy zapis wymaga podania klucza oraz wartości, jedoch w praktyce niemal zawsze dodaje się parametry określające czas życia danych oraz zakres ich dostępności. Nazwa i wartość: Kluczowy element w formacie nazwa=wartość. Atrybut expires lub max-age: Określa, jak długo plik cookie ma pozostać w przeglądarce. Ścieżka i domena: Definiują, na jakich podstronach ciasteczko będzie odczytywane.

Oto gotowy przykład kodu JavaScript służący do bezpiecznego zapisywania danych: javascript document.cookie = uzytkownik=JanKowalski; max-age=86400; path=/; Powyższy zapis tworzy ciasteczko ważne przez jedną dobę, dostępne w całej domenie.

Tworzenie funkcji pomocniczych do obsługi ciasteczek

Ponieważ natywny interfejs document.cookie jest niewygodny w codziennej pracy i wymaga ręcznego dzielenia ciągů znaków, profesjonalni deweloperi tworzą małe funkcje pomocnicze. Pozwala to uniknąć błędów podczas parsowania i znacznie skraca czas pisania kodu.

Uniwersalna funkcja do zapisu i odczytu

Niezależnie od projektu, warto dysponować sprawdzonym zestawem funkcji. Oto jak wygląda tworzenie ciasteczek js z uwzględnieniem kodowania URI, co chroni przed błędami przy zapisywaniu spacji lub polskich znaków:

javascript
function ustawCookie(nazwa, wartosc, dni) {
let wygasanie =;
if (dni) {
let data = new Date();
data.setTime(data.getTime() + (dni 24 60 60 1000));
wygasanie =; expires= + data.toUTCString();
}
document.cookie = nazwa + = + encodeURIComponent(wartosc) + wygasanie +; path=/;
}

Odczyt danych wymaga natomiast przeszukania tablicy podzielonej po średnikach, co pozwala wyciągnąć wartość konkretnego klucza.

Różnice między plikami cookie a LocalStorage

Początkujący deweloperzy często mylą pliki cookie z nowoczesnymi mechanizmami takimi jak LocalStorage. Jaka jest dokładna roznica miedzy cookie a localstorage? Wybór odpowiedniego magazynu danych ma kluczowe znaczenie dla wydajności oraz architektury aplikacji webowej.

Porównanie plików Cookie oraz LocalStorage

Pliki Cookie

• Wspierają flagi HttpOnly oraz Secure chroniące przed XSS.
• Automatycznie dołączane do każdego zapytania HTTP (narzut na sieć).
• Możliwość ustawienia dokładnej daty wygaśnięcia lub sesyjne.
• Do 4 KB danych na jeden plik cookie.

LocalStorage

• Podatne na ataki XSS, ponieważ skrypty JavaScript mają do nich pełny dostęp.
• Dane pozostają wyłącznie w przeglądarce klienta i nie trafiają na serwer.
• Przechowywane bezterminowo, dopóki użytkownik ich ręcznie nie usunie.
• Zazwyczaj około 5 MB, co daje znacznie większą przestrzeń.

Optymalizacja zapisu zgody na cookies w sklepie internetowym

Michał, front-end developer w warszawskim e-commerce, otrzymał zadanie naprawienia błędu z zapisywaniem zgody użytkownika na pliki cookies. Stary kod zapisywał dane bez atrybutów zabezpieczających, co powodowało ostrzeżenia w audytach bezpieczeństwa.

Początkowa próba bezpośredniego modyfikowania document.cookie bez kodowania znaków doprowadziła do błędów, gdy w preferencjach użytkownika pojawiały się znaki specjalne lub spacje.

Michał zdecydował się napisać bezpieczną funkcję pomocniczą z uwzględnieniem kodowania oraz flag Secure i SameSite, testując jej działanie w różnych przeglądarkach.

Po wdrożeniu rozwiązania problem zniknął, a aplikacja spełniła rygorystyczne normy bezpieczeństwa, zachowując jednocześnie wysoką stabilność działania.