• Artykuł

          

Kurs JavaScript - Cookie  Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-12-20

Podczas tworzenia stron internetowych, często zachodzi potrzeba zachowania pewnych informacji po stronie użytkownika, np. do śledzenia sesji. Do tego celu wykorzystuje się tzw. ciasteczka (ang. cookies). Są to pliki tekstowe, które zawierają interesujące dane. W skryptach możesz je ustawiać, edytować i odczytywać.

W Twojej aplikacji utworzysz ciasteczko, w którym będzie przechowywany ciąg znaków, wprowadzony przez użytkownika do pola tekstowego. Następnie pobierzesz te informacje i wyświetlisz je.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • jak tworzyć pliki cookies,
  • jak odczytywać dane z wcześniej utworzonych plików cookies.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, zobacz Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie utworzenie pliku cookie, a następnie odczytanie informacji w nim zawartych za pomocą metody split.

Plik cookie ma następującą postać:

nazwa_cookie=wartość_cookie; expires=data_wygasniecia; domain=domena_Strony; path=sciezka_URL; secure

z czego wymaganymi danymi są nazwa_cookie oraz wartość_cookie (przyjmujące dowolne wartości tekstowe).

  1. W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip.
  2. Wciśnij przycisk F12 lub wybierz Tools–>F12 developer Tools.

Rys. 1. Narzędzia programistyczne do JavaScript w Internet Explorer 9.

  1. W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys. 1.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:
function ustawCookie() {
    var imie = prompt("Jak masz na imię?", "");
    document.cookie = 'imie_uzytkownika' + "=" + escape(imie);
    var ciastko = document.cookie.split("=");
    imie = ciastko[1]
    document.getElementById("pokaz").innerHTML="Twoje imię to: " + imie;
}
ustawCookie();
Informacja

Najważniejsze elementy powyższego kodu to:

  • metoda document.cookie, która tworzy nowy plik cookie (lub nadpisująca już istniejący) o podanej nazwie (w tym przypadku imie_uzytkownika), zawierający przesłaną wartość (imię pobrane od użytkownika za pomocą okna prompt),
  • metoda document.cookie.split rozdziela ciasteczko do zmiennej tablicowej na podstawie podanego znaku.
  1. Wciśnij przycisk Run Script. Wówczas strona samouczka powinna wywołać okno typu prompt, a następnie wyświetlić wprowadzone do niego dane tak, jak pokazano to na Rys. 2.

Rys. 2. Strona wyświetlająca dane z pliku cookie oraz komunikat pobierający, a następnie zapisujący je, do pliku cookie.

Podsumowanie

W tym samouczku nauczyłeś się, jak tworzyć i odczytywać dane z pliku cookie.

W kolejnym samouczku nauczysz się, Jak przechwytywać błędy w języku JavaScript.