Pliki cookie w JavaSkrypt: Przykład Ustaw, Pobierz i Usuń

Co to są pliki cookie?

Plik cookie to fragment danych przechowywany na Twoim komputerze, do którego dostęp ma Twoja przeglądarka. Możliwe, że korzystałeś z zalet plików cookie, świadomie lub nieświadomie. Czy kiedykolwiek byłeś zalogowany na stronie takiej jak Facebook, aby nie musieć wpisywać swoich danych za każdym razem, gdy próbujesz się zalogować? Jeśli tak, to używasz plików cookie. Pliki cookie są zapisywane jako pary klucz/wartość.

Ważne wyjaśnienie: plik cookie nie przechowuje hasła. Zawiera identyfikator sesji, czyli losowy token, który serwer generuje po pomyślnym zalogowaniu. Serwer dopasowuje ten token do Twojego konta, więc samo hasło nigdy nie opuszcza serwera.

Dlaczego potrzebujesz pliku cookie?

Komunikacja pomiędzy A przeglądarka internetowa Serwer i serwer korzystają z protokołu bezstanowego o nazwie HTTP. Protokół bezstanowy przetwarza każde żądanie niezależnie. Oznacza to, że serwer nie przechowuje danych po ich wysłaniu do przeglądarki. Jednak w wielu sytuacjach dane te będą ponownie potrzebne. I tu do akcji wkraczają pliki cookie. Dzięki plikom cookie przeglądarka internetowa nie musi komunikować się z serwerem za każdym razem, gdy potrzebuje danych. Zamiast tego może je pobrać bezpośrednio z komputera.

Typowe zastosowania obejmują zapamiętywanie sesji logowania, przechowywanie preferencji języka lub motywu,ping przedmioty w sklepieping koszyka pomiędzy stronami oraz liczenie nowych i powracających użytkowników.

Javascript Ustaw plik cookie

Możesz tworzyć ciasteczka używając właściwości document.cookie w ten sposób.

document.cookie = "cookiename=cookievalue"

Możesz nawet dodać datę wygaśnięcia do pliku cookie, aby dany plik cookie został usunięty z komputera w określonym dniu. Data wygaśnięcia powinna być ustawiona w formacie UTC/GMT. Jeśli nie ustawisz daty wygaśnięcia, plik cookie zostanie usunięty po zamknięciu przeglądarki przez użytkownika.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

Możesz również ustawić domenę i ścieżkę, aby określić, do której domeny i do których katalogów w danej domenie należy plik cookie. Domyślnie plik cookie należy do strony, która go ustawia.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

//utwórz plik cookie z domeną bieżącej strony i ścieżką obejmującą całą domenę.

JavaSkrypt Pobierz plik cookie

Dostęp do pliku cookie można uzyskać w ten sposób. Zostaną zwrócone wszystkie pliki cookie zapisane dla bieżącej domeny.

var x =  document.cookie

Zwracana wartość jest pojedynczym ciągiem znaków w formie name1=value1; name2=value2. Nie ma wbudowanej metody odczytu jednego pliku cookie po nazwie, więc ciąg musi zostać podzielony. Poniższy pomocnik zwraca pojedynczą wartość i pusty ciąg, gdy nazwa jest niedostępna.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

Wyjście:

Ann Smith
true

JavaSkrypt Usuń plik cookie

Aby usunąć plik cookie, wystarczy ustawić jego wartość na „pusty” i ustawić wartość „expirs” na datę, która już minęła.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Jeden szczegół jest przyczyną większości nieudanych usunięć. Przeglądarka identyfikuje plik cookie po jego nazwie wraz ze ścieżką i domeną, dlatego polecenie usunięcia musi powtarzać tę samą ścieżkę i domenę, które zostały użyte podczas tworzenia pliku cookie.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Wyjaśnienie atrybutów plików cookie

Każdy atrybut po pierwszym średniku zmienia czas życia pliku cookie, które żądania go przenoszą i który kod może go odczytać. Poniższy odnośnik opisuje wszystkie te elementy.

SameSite zasługuje na szczególną uwagę, ponieważ przeglądarki stosują teraz wartość domyślną. Trzy akceptowane wartości zachowują się następująco.

• Ścisłe: Plik cookie nigdy nie jest wysyłany, gdy żądanie pochodzi z innej witryny, co jest najbezpieczniejszym ustawieniem dla sesji bankowych.
• Niedbały: Plik cookie jest przesyłany wraz z nawigacją najwyższego poziomu, taką jak kliknięcie linku, ale nie z obrazami ani ramkami między witrynami. Jest to domyślne ustawienie nowoczesnej przeglądarki.
• Żaden: Plik cookie jest wysyłany przy każdym żądaniu międzywitrynowym i musi być sparowany z atrybutem Secure, w przeciwnym razie przeglądarka go odrzuci.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Wypróbuj ten przykład samodzielnie

Poniższy skrypt łączy wszystkie trzy operacje. Tworzy plik cookie z okresem ważności mierzonym w dniach, odczytuje jego nazwę i wita powracającego użytkownika. Specjalne instrukcje, aby kod działał… Naciśnij przycisk Uruchom dwa razy.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Oczekiwane zachowanie:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code wyjaśnienie: Funkcja createCookie konwertuje liczbę dni na milisekundy i dodaje je do czasu bieżącego, co generuje datę wygaśnięcia. Funkcja accessCookie dzieli ciąg cookie na średniki, przycina każdy fragment i porównuje początek fragmentu z żądaną nazwą. Funkcja checkCookie łączy te dwa elementy podczas ładowania strony.

Pliki cookie kontra localStorage kontra sessionStorage

Pliki cookie to nie jedyne miejsce, w którym przeglądarka może przechowywać dane. Istnieją dwie opcje Web Storage, a ich prawidłowy wybór pozwala uniknąć wysyłania niepotrzebnych bajtów przy każdym żądaniu.

Praktyczna zasada jest prosta. Jeśli serwer potrzebuje wartości, użyj pliku cookie. Jeśli potrzebuje jej tylko strona, użyj localStorage lub sessionStorage, ponieważ te wartości nigdy nie dodają wagi do żądania sieciowego.

Kod obsługi plików cookie jest zwykle współdzielony na wielu stronach, dlatego należy go przejrzeć wewnętrzny i zewnętrzny JavaScenariusz przed podjęciem decyzji, gdzie go umieścić. Zastosowane tutaj rozdzielenie strun opiera się na JavaCiągi skryptów oraz JavaMetody tablicowe skryptówi dalsze skrypty robocze pojawiają się w praktyczny JavaPrzykłady kodu skryptu.

FAQ