Wprowadzenie do plików cookie: Zrozumienie i praca z plikami cookie JavaScript

Preslav Dobrev2022-10-25 · 7 min read

Wprowadzenie do plików cookie: Zrozumienie i praca z plikami cookie JavaScript

Pliki cookie przeglądarki, lub pliki cookie HTTP, to pliki tekstowe składające się z niewielkich ilości danych. Witryny internetowe wykorzystują te informacje do śledzenia ścieżki użytkownika, co pozwala im oferować dopasowane funkcje i ulepszać wrażenia z przeglądania. Pliki cookie mogą przechowywać do 4096 bajtów danych. Jednak możemy dodać ograniczoną liczbę plików cookie na domenę, w zależności od przeglądarki.

Podstawowe zrozumienie plików cookie HTTP jest niezbędne dla każdego użytkownika internetu, niezależnie od tego, czy przeglądasz go tylko dla zabawy, czy zarabiasz na tym na życie. Ten przewodnik szczegółowo wprowadzi Cię w temat plików cookie i ich różnych rodzajów. Naszym celem jest pomoc w zrozumieniu i pracy z plikami cookie JavaScript.

Zacznijmy!

Wymagania wstępne

Aby móc śledzić ten samouczek, musisz posiadać:

Podstawowe zrozumienie JavaScript.

Pierwsze kroki z plikami cookie JavaScript

Praca z plikami cookie JavaScript jest prosta. Pozwala bez wysiłku tworzyć, edytować i pobierać pliki cookie. Ponadto możemy użyć właściwości cookie obiektu Document, aby manipulować i ograniczać właściwości plików cookie, takie jak m.in. nazwa, wartość i długość.

Rodzaje plików cookie

Najpierw przyjrzyjmy się różnym rodzajom plików cookie:

Własne pliki cookie

Te pliki cookie są tworzone i przechowywane za każdym razem, gdy użytkownik odwiedza witrynę. Pozwala to właścicielom witryn uzyskać szczegółowy wgląd w dane użytkowników i zapewnić im lepsze wrażenia z przeglądania.

Stałe pliki cookie

Dla tego rodzaju plików cookie wystawca przypisuje datę wygaśnięcia. Stąd też są one używane przez znacznie dłuższy czas. Oznacza to, że nawet po zamknięciu przeglądarki plik cookie pozostanie w niej. Ponadto dane są odsyłane do wystawcy za każdym razem, gdy odwiedzasz witrynę, która utworzyła ten plik cookie.

Sesyjne pliki cookie

Te pliki cookie są tylko tymczasowe i będą przechowywane w pamięci przeglądarki, dopóki jest ona otwarta. Po jej zamknięciu plik cookie jest usuwany z historii przeglądarki, co zmniejsza ryzyko związane z bezpieczeństwem. Nie musisz określać daty wygaśnięcia.

Pliki cookie stron trzecich

Pliki cookie stron trzecich są tworzone przez witrynę, której obecnie nie odwiedzasz. Najczęściej te pliki cookie są pomocne w śledzeniu użytkownika, który kliknął reklamę, powiązując go z domeną, która go przekierowała.

Tworzenie plików cookie

Możemy tworzyć pliki cookie na dwa sposoby:

Wyślij Set-Cookie w nagłówku odpowiedzi HTTP. W zależności od technologii używanych w serwerze WWW, możesz zarządzać nagłówkami plików cookie za pomocą narzędzi i bibliotek. Pliki cookie mogą zawierać informacje, takie jak data wygaśnięcia i funkcje bezpieczeństwa, takie jak dyrektywa secure oraz flaga HttpOnly.

HttpOnly: Wskazuje, że przeglądarka nie może odczytywać ani modyfikować plików cookie.
Secure: Wskazuje, że plik cookie może być przesyłany wyłącznie przez protokół HTTPS.

Używając właściwości JavaScript document.cookie, możemy tworzyć, odczytywać i usuwać pliki cookie.

Krok 1 — Tworzenie pliku cookie

Następnie zademonstrujemy proces tworzenia pliku cookie JavaScript. Pliki cookie są zapisywane w formacie pary nazwa-wartość:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

W powyższym pliku cookie, UserName to nazwa pliku cookie, podczas gdy CloudSigma to przechowywana w nim wartość.

Plik cookie ma datę wygaśnięcia. Domyślnie jest on usuwany automatycznie po wyłączeniu przeglądarki. Możesz również dodać datę wygaśnięcia do swojego pliku cookie:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Domyślnie pliki cookie należą do bieżącej strony. Możemy jednak również określić plik cookie za pomocą parametru path:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age vs Cookie Expire

W zależności od potrzeb możesz użyć tych dwóch strategii, aby ustawić datę wygaśnięcia pliku cookie. Różnica między nimi polega na tym, że expires ustawia datę wygaśnięcia, po której plik cookie zostanie usunięty. Z kolei max-Age ustawia czas w sekundach, po którym plik cookie zostanie usunięty. Niestety, max-age nie jest obsługiwany przez wszystkie przeglądarki.

Przykład ustawiania pliku cookie za pomocą expires oraz max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // w milisekundach
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // w milisekundach

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Step 2 — Reading a Cookie

Atrybut document.cookie zwraca ciąg znaków. Jeśli istnieją dwa lub więcej plików cookie, używamy średnika( ;) i spacji, aby je rozdzielić.

Używamy metody split() do wyodrębnienia pojedynczego pliku cookie z listy plików cookie. Metoda ta dzieli listę na poszczególne pary nazwa-wartość. Po zakończeniu możesz wyszukać docelowy plik cookie, który chcesz odczytać:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Witaj ponownie, " + UserName);
} else {
    firstName = prompt("Wprowadź swoją nazwę użytkownika:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Witaj ponownie, " + UserName);

} else {

firstName = prompt("Wprowadź swoją nazwę użytkownika:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Zrozummy funkcje, które stworzyliśmy w kodzie:

Function Name	Description
setCookie()	Tworzy plik cookie
getCookie()	Odczytuje wartość pliku cookie
checkCookie()	Weryfikuje, czy UserName jest ustawiony, czy nie.

W kolejnym kroku dowiemy się, jak zaktualizować plik cookie.

Step 3 — Updating a Cookie

Możemy ustawić nowe wartości dla atrybutów naszego pliku cookie. W naszym przykładzie zaktualizujmy subskrypcję użytkownika z planu miesięcznego na plan kwartalny.

Zaktualizujmy atrybut max-age pliku cookie UserName z 30 dni do 180 dni:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Step 4 — Deleting a Cookie

Nadpisanie pliku cookie o tej samej nazwie usunie plik cookie, który chcesz skasować. Możemy usunąć plik cookie, ustawiając atrybut max-age na 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Dodatkowo, jeśli plik cookie ma określoną ścieżkę, usuń go, określając ją:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Podsumowanie

Pliki cookie są niezbędne do prawidłowego działania i funkcjonowania strony internetowej. W tym samouczku wprowadzającym szczegółowo omówiliśmy pliki cookie i ich różne rodzaje. Dodatkowo nauczyliśmy się pracować z plikami cookie na podstawie przykładu. Teraz, gdy czujesz się już swobodnie korzystając z plików cookie JavaScript, zacznij tworzyć spersonalizowane pliki cookie, aby dowiedzieć się i odkryć więcej na ten temat.

Ponadto istnieje wiele samouczków dotyczących JavaScript i tworzenia stron internetowych, które możesz poznać na naszym blogu:

Miłego kodowania!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev jest projektantem kreatywnym w CloudSigma, skupiającym się na spójnej tożsamości biznesowej przy wykorzystaniu tradycyjnych i innowacyjnych kanałów marketingowych. Biegle łączy wizję artystyczną ze strategicznym marketingiem, tworząc wywierające wpływ narracje marki.