Co to są pliki cookie i jak z nimi pracować za pomocą JavaScript
Podczas pracy z aplikacjami w skali przemysłowej serwery nie pamiętają szczegółów na temat swojego klienta. Po zakończeniu sesji serwer usuwa wszystkie informacje o kliencie, dlatego pliki cookie są przechowywane po stronie klienta. Więc następnym razem klient wyciąga się na serwer z żądaniem, plik cookie jest wysyłany wraz z żądaniem, aby serwer znał już preferencje klienta.
Jakie są rodzaje plików cookie?
Istnieją trzy różne rodzaje plików cookie, które są:
- Sesyjne pliki cookie: Te pliki cookie są automatycznie usuwane z przeglądarek po zakończeniu sesji ze stroną internetową
- First Party Cookies: Są to pliki cookie tworzone przez określoną stronę internetową i można je odczytać tylko przez tę konkretną stronę internetową
- Ciasteczka stron trzecich: Są to pliki cookie stworzone przez reklamę działającą na stronie internetowej, którą mogłeś odwiedzić
Jakie są pola plików cookie?
Ogólnie rzecz biorąc, pliki cookie wyglądają jak pary wartości nazwy, ale składają się z 5 różnych pól. Te pola to:
- Nazwa = pary wartości: To są wersja plik cookie „para-wartości”
- Wygasa: To określa, kiedy plik cookie wygasa z przeglądarki, jeśli nie zostanie określona data wygaśnięcia, wówczas plik cookie zostanie usunięty po zamknięciu przeglądarki
- Ścieżka: Ścieżka strony internetowej, która ustawiał ciastko w przeglądarce, jeśli ścieżka jest pusta, usuwanie określonego może stać się przeszkodą
- Domena: Nazwa domeny strony, która ustawia plik cookie
- Bezpieczne: Jeśli to pole jest ustawione, plik cookie może być odczytany tylko przez bezpieczny serwer
To są wszystkie zmienne pola pliku cookie, oprócz Nazwa = wartość pary wszystkie pozostałe pola są opcjonalne
Jak używać JavaScript do pracy z ciasteczkami?
Pliki cookie są oddziaływane przez JavaScript za pomocą następującej składni:
dokument.cookie = "name = wartość; wygasa: 01 stycznia 2024; ścieżka =/;"Aby zademonstrować pracę z ciasteczkami, skonfigurujemy stronę internetową HTML z następującymi wierszami na stronie internetowej:
To wszystkie ciasteczka!!
Otrzymujemy następujące dane wyjściowe w naszej przeglądarce:
Teraz, gdy mamy konfigurację HTML, możemy zacząć pracować nad naszym kodem JavaScript. Pierwszą rzeczą, którą zamierzamy zaimplementować, jest funkcjonalność przycisku, która doda plik cookie do naszej przeglądarki z następującymi wierszami kodu:
$ („#add”).kliknij (funkcja ()dokument.cookie = "Nazwa = pyszne ciastko!";
Alert („Dodano ciasteczka”);
);
Teraz uruchom program i kliknij przycisk z napisem „Kliknij, aby dodać pyszne plik cookie!”, Otrzymasz następujące dane wyjściowe:
Możesz potwierdzić to ciastko, udając się do Konsola programisty> Aplikacja> Pliki cookie i znalezienie pliku cookie, które właśnie stworzyliśmy, tak jak pokazano na zdjęciu poniżej:
Jak widać z narzędzi programistów, udało nam się utworzyć nasze plik cookie. Następnym krokiem jest odczytanie tego pliku cookie za pomocą JavaScript i powiadomienie użytkownika o pliku cookie po naciśnięciu przycisku, robimy to za pomocą następujących wierszy kodu:
$ („#show”).kliknij (funkcja ()Alert (dokument.ciastko);
);
Kliknij przycisk z napisem „Kliknij, aby pokazać pliki cookie”, a otrzymasz następujący wynik:
Jak widać, możemy odczytać plik cookie i wyświetlić je użytkownikowi. Teraz musimy nauczyć się usunąć ciasteczka z przeglądarki. Możemy usunąć przycisk na przycisk, używając następujących wierszy kodu:
$ („#delete”).kliknij (funkcja ()dokument.cookie = "name =; wygasa = czw, 01 stycznia 1970 00:00:01 gmt";
Alert („Usunięto ciasteczka”);
);
Możemy usunąć pliki cookie, ustawiając datę wygaśnięcia na przeszłość i właśnie to zrobiliśmy w powyższym fragmencie kodu. Teraz, jeśli naciśniesz przycisk „Kliknij, aby usunąć cookie”, otrzymasz następujący wynik:
Aby zweryfikować to usunięcie, kliknij przycisk, aby jeszcze raz pokazać pliki cookie, a otrzymasz następujący wynik:
Jak widać, okno dialogowe Alert nie pokazuje nam żadnych plików cookie, ponieważ udało nam się usunąć przycisk Usuń za pomocą przycisku Usuń.
Wniosek
Pliki cookie to małe pliki tekstowe przechowywane na komputerze klienta lub w przeglądarce klienta w celu powiadomienia serwera o preferencjach klienta. Istnieją trzy różne rodzaje ciasteczek, a mianowicie: sesy. Plik cookie zawiera 5 różnych pól, z których tylko jeden jest obowiązkowy, a pozostałe 4 pola są opcjonalne. Funkcje plików cookie są wykonywane w JavaScript za pomocą dokument.ciastko atrybut. W tym poście nauczyliśmy się pracować z plikami cookie za pomocą JavaScript.