Ciasteczka co i jak – Javascript

Co to są ciasteczka?

Przeglądarki internetowe i serwery używają protokołu HTTP do komunikacji, a HTTP jest protokołem nie przechowującym danych, czyli bezstanowym. Jednak w przypadku komercyjnych, profesjonalnych stron internetowych, wymagane jest zachowanie informacji o sesji pomiędzy różnymi stronami. Na przykład, jedna rejestracja użytkownika kończy się po zakończeniu wielu podstron. Jak więc utrzymać informacje o sesji użytkowników na wszystkich stronach internetowych?

W wielu sytuacjach użycie plików cookie jest najbardziej efektywną metodą zapamiętywania i śledzenia preferencji użytkowników, zakupów i innych informacji wymaganych dla zapewnienia lepszego doświadczenia naszych odwiedzających.

Jak to działa?

Twój serwer wysyła pewne dane do przeglądarki osoby odwiedzającej stronę w formie pliku cookie. Przeglądarka może zaakceptować plik cookie. Jeśli to zrobi, jest on przechowywany jako zwykły zapis tekstowy na dysku twardym odwiedzającego. Teraz, gdy odwiedzający wejdzie na inną stronę w Twojej witrynie, przeglądarka wysyła ten sam plik cookie do serwera w celu jego pobrania. Po pobraniu, Twój serwer wie/pamięta co było zapisane wcześniej.

Cookies to zapis danych w postaci zwykłego tekstu składającego się z 5 pól o zmiennej długości –

  • Expires– Data wygaśnięcia pliku cookie. Jeśli pole jest puste, cookie wygaśnie po zamknięciu przeglądarki.
  • Domain – Nazwa domeny twojej strony.
  • Path – Ścieżka do katalogu lub strony, na której ustawiony został plik cookie. Może być puste, jeżeli chcesz pobrać plik cookie z dowolnego katalogu lub strony.
  • Secure – Jeśli w polu tym znajduje się słowo “Secure“, wówczas plik cookie może być pobierany tylko za pomocą bezpiecznego serwera. Jeśli pole jest puste, to takie ograniczenie nie istnieje.
  • Nazwa=Wartość – ciasteczka są ustawiane i pobierane w formie par klucz-wartość

Ciasteczka zostały pierwotnie zaprojektowane dla programowania CGI. Dane zawarte w pliku cookie są automatycznie przesyłane pomiędzy przeglądarką internetową a serwerem internetowym, dzięki czemu skrypty CGI na serwerze mogą odczytywać i zapisywać wartości plików cookie przechowywanych na kliencie.

JavaScript może również manipulować ciasteczkami używając właściwości cookie obiektu Document. JavaScript może odczytywać, tworzyć, modyfikować i usuwać ciasteczka, które odnoszą się do bieżącej strony internetowej.

Przechowywanie plików cookie

Najprostszym sposobem na utworzenie ciasteczka jest przypisanie wartości łańcuchowej do obiektu document.cookie, co wygląda tak.

document.cookie = "key1 = value1;key2 = value2;expires = date";

Atrybut expires jest tutaj opcjonalny. Jeśli podasz w tym atrybucie ważną datę lub czas, to ciasteczko wygaśnie w danym dniu lub czasie, a po tym czasie wartość ciasteczka nie będzie dostępna.

Uwaga – Wartości ciasteczek nie mogą zawierać średników, przecinków ani białych znaków. Z tego powodu warto użyć funkcji escape() w JavaScript, aby zakodować wartość przed zapisaniem jej do cookie. Jeśli to zrobisz, będziesz musiał również użyć odpowiedniej funkcji unescape() kiedy będziesz odczytywał zawartość ciasteczka.

Przykład

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function ustawCiasteczko() {
               if( document.formularz.klient.value == "" ) {
                  alert("Wprowadź jakieś wartości!");
                  return;
               }
               wartoscCiast = escape(document.formularz.klient.value) + ";";
               document.cookie = "Nazwa=" + wartoscCiast;
               document.write ("Ustawianie ciasteczka : " + "Nazwa=" + wartoscCiast );
            }
         //-->
      </script>      
   </head>
   
   <body>      
      <form name = "formularz" action = "">
         Podaj nazwę: <input type = "text" name = "klient"/>
         <input type = "button" value = "Ustaw ciasteczko" onclick = "ustawCiasteczko();"/>
      </form>   
   </body>
</html>

Czytanie ciasteczek

Odczyt pliku cookie jest tak samo prosty jak jego zapis, ponieważ wartością obiektu document.cookie jest plik cookie. Możesz więc użyć tego łańcucha zawsze, gdy chcesz uzyskać dostęp do ciasteczka. Łańcuch document.cookie będzie przechowywał listę par nazwa=Wartość oddzielonych średnikami, gdzie nazwa to nazwa ciasteczka, a wartość to jego wartość łańcuchowa.

Możesz użyć funkcji split() aby rozbić ciąg znaków na klucz i wartości w następujący sposób -.

Przykład

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function czytajCiasteczko() {
               var wszystkieCiast = document.cookie;
               document.write ("Wszystkie ciasteczka : " + allcookies );
               
               // Pobierz wszystkie ciasteczka do tablicy
               tabciast = allcookies.split(';');
               
               // Teraz wyjmij parę klucz-wartość z tej tablicy
               for(var i=0; i<tabciast.length; i++) {
                  name = tabciast[i].split('=')[0];
                  value = tabciast[i].split('=')[1];
                  document.write ("Klucz to : " + name + " a wartość to: " + value);
               }
            }
         //-->
      </script>      
   </head>
   
   <body>     
      <form name = "formularz" action = "">
         <p>Kliknij aby zobaczyć wynik:</p>
         <input type = "button" value = "Czytaj ciasteczka" onclick = "czytajCiasteczko()"/>
      </form>      
   </body>
</html>

Ustawianie daty wygaśnięcia plików cookie

Możesz przedłużyć żywotność pliku cookie poza bieżącą sesję przeglądarki poprzez ustawienie daty wygaśnięcia i zapisanie jej w pliku cookie. Można to zrobić ustawiając atrybut “expires” na datę i czas.

Przykład

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function wypiszCiastko() {
               var teraz = new Date();
               teraz.setMonth( teraz.getMonth() + 1 );
               cookievalue = escape(document.formularz.klient.value) + ";"
               
               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + teraz.toUTCString() + ";"
               document.write ("Ustawianie ciasteczka : " + "Nazwa=" + cookievalue );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <form name = "formularz" action = "">
         Wprowadź nazwę: <input type = "text" name = "klient"/>
         <input type = "button" value = "Ustaw ciasteczko" onclick = "wypiszCiastko()"/>
      </form>      
   </body>
</html>

Usuwanie plików cookie

Czasami będziesz chciał usunąć ciasteczko, aby kolejne próby jego odczytania nic nie zwróciły. Aby to zrobić, wystarczy ustawić datę wygaśnięcia na jakiś czas w przeszłości.

Przykład

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function wypiszCiastko() {
               var teraz = new Date();
               teraz.setMonth( teraz.getMonth()1 ); // - zamiast +, czyli przeszłość. To wystarczy aby usunąć ciasteczko
               cookievalue = escape(document.formularz.klient.value) + ";"
               
               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + teraz.toUTCString() + ";"
               document.write ("Ustawianie ciasteczka : " + "Nazwa=" + cookievalue );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <form name = "formularz" action = "">
         Wprowadź nazwę: <input type = "text" name = "klient"/>
         <input type = "button" value = "Ustaw ciasteczko" onclick = "wypiszCiastko()"/>
      </form>      
   </body>
</html>

Dodaj komentarz