Pliki cookie JavaScript
Pliki cookie umożliwiają przechowywanie informacji o użytkownikach na stronach internetowych.
Co to są pliki cookie?
Pliki cookie to dane przechowywane w małych plikach tekstowych na Twoim komputerze.
Gdy serwer sieciowy wyśle stronę internetową do przeglądarki, połączenie zostaje przerwane, a serwer zapomina o wszystkim o użytkowniku.
Ciasteczka zostały wymyślone w celu rozwiązania problemu „jak zapamiętać informacje o użytkowniku”:
- Kiedy użytkownik odwiedza stronę internetową, jego nazwa może być przechowywana w pliku cookie.
- Przy następnej wizycie użytkownika na stronie plik cookie „zapamiętuje” jego nazwę.
Pliki cookie są zapisywane w parach nazwa-wartość, takich jak:
username = John Doe
Gdy przeglądarka żąda strony internetowej z serwera, pliki cookie należące do strony są dodawane do żądania. W ten sposób serwer uzyskuje niezbędne dane, aby „zapamiętać” informacje o użytkownikach.
Żaden z poniższych przykładów nie zadziała, jeśli Twoja przeglądarka ma wyłączoną obsługę lokalnych plików cookie.
Utwórz plik cookie za pomocą JavaScript
JavaScript może tworzyć, odczytywać i usuwać pliki cookie za pomocą document.cookie
właściwości.
Za pomocą JavaScript można utworzyć plik cookie w następujący sposób:
document.cookie = "username=John Doe";
Możesz również dodać datę wygaśnięcia (w czasie UTC). Domyślnie plik cookie jest usuwany po zamknięciu przeglądarki:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Za pomocą parametru path możesz poinformować przeglądarkę, do której ścieżki należy plik cookie. Domyślnie plik cookie należy do bieżącej strony.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Przeczytaj plik cookie za pomocą JavaScript
Dzięki JavaScript pliki cookie można odczytać w następujący sposób:
let x = document.cookie;
document.cookiezwróci wszystkie ciasteczka w jednym łańcuchu, podobnie jak: ciasteczko1=wartość; cookie2=wartość; cookie3=wartość;
Zmień plik cookie za pomocą JavaScript
Za pomocą JavaScript możesz zmienić plik cookie w taki sam sposób, w jaki go tworzysz:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Stare ciasteczko zostanie nadpisane.
Usuń plik cookie za pomocą JavaScript
Usunięcie pliku cookie jest bardzo proste.
Nie musisz określać wartości pliku cookie podczas usuwania pliku cookie.
Wystarczy ustawić parametr wygasania na datę przeszłą:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
Powinieneś zdefiniować ścieżkę do pliku cookie, aby upewnić się, że usuniesz właściwy plik cookie.
Niektóre przeglądarki nie pozwalają na usunięcie pliku cookie, jeśli nie określisz ścieżki.
Ciąg ciasteczek
Właściwość document.cookiewygląda jak normalny ciąg tekstowy. Ale to nie jest.
Nawet jeśli napiszesz cały ciąg cookie do document.cookie, po ponownym odczytaniu zobaczysz tylko jego parę nazwa-wartość.
Jeśli ustawisz nowy plik cookie, starsze pliki cookie nie zostaną nadpisane. Nowe ciasteczko jest dodawane do document.cookie, więc jeśli ponownie przeczytasz document.cookie, otrzymasz coś takiego:
ciasteczko1 = wartość; cookie2 = wartość;
Jeśli chcesz znaleźć wartość jednego określonego pliku cookie, musisz napisać funkcję JavaScript, która wyszukuje wartość pliku cookie w ciągu cookie.
Przykładowy plik cookie JavaScript
W poniższym przykładzie utworzymy plik cookie, który przechowuje imię i nazwisko odwiedzającego.
Przy pierwszym wejściu na stronę internetową odwiedzający zostanie poproszony o podanie swojego imienia i nazwiska. Nazwa jest następnie przechowywana w pliku cookie.
Następnym razem, gdy odwiedzający dotrze na tę samą stronę, otrzyma wiadomość powitalną.
Na przykład stworzymy 3 funkcje JavaScript:
- Funkcja do ustawienia wartości cookie
- Funkcja do uzyskania wartości pliku cookie
- Funkcja sprawdzania wartości pliku cookie
Funkcja do ustawienia pliku cookie
Najpierw tworzymy plik function, który przechowuje nazwę odwiedzającego w zmiennej cookie:
Przykład
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Przykład wyjaśniony:
Parametry powyższej funkcji to nazwa ciasteczka (cname), wartość ciasteczka (cvalue) oraz liczba dni do wygaśnięcia ciasteczka (exdays).
Funkcja ustawia ciasteczko poprzez dodanie nazwy ciasteczka, wartości ciasteczka i ciągu wygasającego.
Funkcja do uzyskania pliku cookie
Następnie tworzymy plik function, który zwraca wartość określonego ciasteczka:
Przykład
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Wyjaśnienie funkcji:
Weź plik cookie jako parametr (cname).
Utwórz zmienną (nazwa) z tekstem do wyszukania (cname + "=").
Odkoduj ciąg cookie, aby obsłużyć pliki cookie ze znakami specjalnymi, np. „$”
Podziel document.cookie na średniki na tablicę o nazwie ca (ca = decodedCookie.split(';')).
Przeprowadź pętlę przez tablicę ca (i = 0; i < ca.length; i++) i odczytaj każdą wartość c = ca[i]).
Jeśli plik cookie zostanie znaleziony (c.indexOf(name) == 0), zwróć wartość pliku cookie (c.substring(name.length, c.length).
Jeśli plik cookie nie zostanie znaleziony, zwróć „”.
Funkcja sprawdzania plików cookie
Na koniec tworzymy funkcję, która sprawdza, czy plik cookie jest ustawiony.
Jeśli plik cookie jest ustawiony, wyświetli powitanie.
Jeśli ciasteczko nie jest ustawione, wyświetli okno z pytaniem o nazwę użytkownika i przechowuje ciasteczko z nazwą użytkownika przez 365 dni, wywołując setCookiefunkcję:
Przykład
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
Teraz wszyscy razem
Przykład
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
Powyższy przykład uruchamia checkCookie()funkcję podczas ładowania strony.