Jak ustawić, sprawdzać i czytać wartość cookie z JavaScript?

Pliki cookie to małe pliki tekstowe, które przechowują niewielkie dane na komputerze użytkownika (około 4 kB) i są używane do przechowywania informacji o użytkowniku, na przykład preferencje użytkownika dla strony internetowej, którą strona może odzyskać, aby spersonalizować stronę internetową, gdy gdy jest to strona internetowa. Użytkownik ponownie odwiedza witrynę. Mówiąc prosto, pliki cookie pomagają w wygodniejszej i osobistej wizycie w witrynie dla użytkowników. Plik cookie jest wysyłany do komputera przez stronę internetową podczas jej odwiedzenia i jest zapisywany w pliku na komputerze, który jest dostępny za pośrednictwem przeglądarki internetowej.

W tym artykule porozmawiamy o tym, jak ustawić, sprawdzać i czytać wartość cookie z JavaScript. Jednak przed pójściem dalej pozwól mi podkreślić punkt, że pliki cookie nie powinny być używane do przechowywania krytycznych/poufnych informacji, takich jak hasła lub szczegóły karty kredytowej, ponieważ złośliwe osoby mogły do ​​nich uzyskać dostęp.

Tworzenie pliku cookie

dokument.ciastko właściwość tworzy, czyta i usuwa pliki cookie, a jest to właściwość, która reprezentuje wszystkie pliki cookie związane z dokumentem. Aby najpierw utworzyć ciasteczka, powinniśmy wiedzieć, że pliki cookie są zapisywane na przykład w parach nazwy:

Nazwa użytkownika = Obama;

Utwórzmy teraz plik cookie w JavaScript:

dokument.cookie = "nazwa użytkownika = Obama";

Życie cookie jest ustawione na czas trwania bieżącej sesji przeglądarki, co oznacza, że ​​wygasa, gdy użytkownik zamyka przeglądarkę. Aby rozwiązać ten problem, używamy MAX-AGE atrybut, który zapewnia, że ​​plik cookie utrzymuje się poza bieżącą sesją przeglądarki. W atrybucie maksymalnego wieku możemy określić żywotność pliku cookie w sekundach i-e, jak długo pozostanie ciasteczka, zanim zostanie usunięty. Życie pliku cookie w poniższym kodzie wynosi 30 dni:

dokument.cookie = "nazwa użytkownika = Obama; max-age =" + 30*24*60*60;

Możemy również użyć wygasać Atrybut, który zajmuje dokładną datę, a nie sekundy w formacie GMT/UTC i w tej dniu wygasa plik cookie:

dokument.cookie = "nazwa użytkownika = Obama; wygasa = czw, 26 września 2021 12:00:00 UTC";

Kolejnym atrybutem, którego możemy użyć w tworzeniu pliku cookie, jest ścieżka atrybut, który mówi przeglądarce, do której ścieżki należy, a nie domyślną ścieżką, która jest bieżącą stroną.

dokument.cookie = "nazwa użytkownika = Obama; wygasa = czw, 26 września 2021 12:00:00 UTC; ścieżka =/";

Musimy użyć JavaScript encodeuricomponent () ponieważ wartość plików cookie zawiera przecinki, półkolony i przestrzenie i encodeuricomponenet () Zapewnia, że ​​ciąg nie zawiera przecinków, półkolonów i przestrzeni, ponieważ nie są one dozwolone w plikach cookie.

dokument.cookie = "nazwa użytkownika =" + encodeuricomponent („Obama”);

Czytanie Cookie

Możemy odczytać lub uzyskać wszystkie pliki cookie obecnej domeny za pomocą dokument.ciastko:

var x = dokument.ciastko;

Podobnie jak w tworzeniu pliku cookie, którego użyliśmy encodeuricomponent () Czytając ciasteczka, którego musimy użyć DecododeUricomponenet ():

dokument.cookie = "nazwa użytkownika =" + decododeuricomponent („Obama”);

Usuwanie ciasteczka

Możemy również usunąć plik cookie, a w JavaScript proces jest bardzo prosty, ponieważ nie musimy określić pewnej wartości plików cookie, a raczej możemy użyć parametru Exire i zaktualizować go, używając na przykład wcześniejszej daty:

dokument.cookie = "nazwa użytkownika = Obama; wygasa = czw, 20 listopada 2018 12:00:00 UTC; ścieżka =/";

Usuwanie ciasteczka

Możemy również usunąć plik cookie, a w JavaScript proces jest bardzo prosty, ponieważ nie musimy określić pewnej wartości plików cookie, a raczej możemy użyć parametru Exire i zaktualizować go, używając na przykład wcześniejszej daty:

dokument.cookie = "nazwa użytkownika = Obama; wygasa = czw, 20 listopada 2018 12:00:00 UTC; ścieżka =/";

Przykład cookie w JavaScript

Teraz, gdy wiemy, czym jest ciasteczka, jak tworzyć lub czytać ciasteczka, połączmy wszystko, czego się nauczyliśmy, i stwórz plik cookie, który przechowuje nazwę, gdy użytkownik odwiedza naszą stronę internetową. Przyjrzymy nazwę wejściową od użytkownika, gdy użytkownik weźmie udział w naszej stronie internetowej po raz pierwszy i będzie przechowywać ją w pliku cookie. Kiedy użytkownik ponownie wejdzie na stronę, otrzyma wiadomość powitalną na stronie internetowej.

Aby zaimplementować powyższy przykład, będziemy potrzebować 3 funkcji, w których jedna z funkcji ustawi plik cookie, odczytuje/otrzyma wartość pliku cookie, a ostatnia funkcja sprawdzi wartość pliku cookie.

Ustaw funkcję cookie

funkcja setCookie (nazwa użytkownika, wartość, wyginięcie)
const data = nowa data ();
data.Ustawa (data.getTime () + (Extiry * 24 * 60 * 60 * 1000));
var expires = "exires ="+data.toutcString ();
dokument.cookie = nazwa użytkownika + "=" + wartość + ";" + wygasa + "; ścieżka =/";

Uzyskaj funkcję cookie

funkcja getcookie (nazwa użytkownika)
niech name = nazwa użytkownika + "=";
Niech spli = dokument.ciastko.podział(';');
dla (var j = 0; j < spli.length; j++)
niech char = spli [j];
When (Char.charat (0) == ")
char = char.podłoże (1);

if (char.indexof (name) == 0)
zwróć char.podłoże (nazwa.długość, char.długość);


powrót "";

Aby uzyskać pojedyncze plik cookie, użyliśmy metody podzielonej, która rozbije nazwę = pary wartości, a następnie wyszukiwać żądaną nazwę.

Sprawdź funkcję cookie

funkcja checkCookie ()
var user = getCookie („nazwa użytkownika”);
// sprawdzanie, czy użytkownik jest zerowy, czy nie
if (użytkownik != "")
// Jeśli użytkownik nie jest zerowy, ale ostrzega
alert („Witamy ponownie” + użytkownik);

// Jeśli użytkownik jest NULL
w przeciwnym razie
// Weź dane wejściowe od użytkownika
user = monit („Wprowadź swoje imię i nazwisko:”, „”);
// Ustaw ciastko
if (użytkownik != "" && użytkownik != null)
setCookie („nazwa użytkownika”, użytkownik, 365);



CheckCookie ();

CHED COOTIE po prostu sprawdza, czy nazwa istnieje, czy nie, czy użytkownik po raz pierwszy odwiedził naszą witrynę, czy nie. Sprawdza, najpierw wywołując metodę getCookie (), która sprawdza, czy nazwa użytkownika istnieje, czy nie, a jeśli istnieje, wyświetla wiadomość powitalna z nazwą użytkownika. Jeśli nazwa użytkownika nie istnieje, wywołuje metodę setCookie (), a użytkownik wówczas wchodzi do nazwy, a plik cookie jest ustawiony.

Poniżej znajdują się zrzuty ekranu, kiedy po raz pierwszy odwiedziłem stronę:

Poniżej znajduje się zrzut ekranu pokazujący nazwę, którą ustawiłem po odświeżeniu strony:

Wniosek

Plik cookie to mały plik tekstowy składający się z niektórych informacji o użytkowniku i jest pakietem danych, który otrzymuje komputer, a następnie wysyła bez zmiany lub zmiany. Pliki cookie przeglądarki pomagają w śledzeniu wizyt użytkowników i działań użytkowników. Na przykład dodałeś niektóre elementy do koszyka i badasz witrynę i poszedłeś na inną stronę lub przypadkowo ją odświeżasz, bez ciasteczek twój koszyk stałby się pusty. Przyjrzeliśmy się, jak ustawić, sprawdzić i czytać pliki cookie w JavaScript z przykładami w tym poście.