Ciasteczka JavaScript
- Poprzednia strona Czasowanie JS
- Następna strona Podstawy Web API
Cookie pozwalają przechowywać informacje o użytkowniku na stronie.
Co to jest cookie?
Cookie są danymi przechowywanymi w małych plikach tekstowych na Twoim komputerze.
Po wysłaniu strony przez serwer do przeglądarki, połączenie jest zamykane, a serwer zapomina wszystkiego o użytkowniku.
Cookie zostały wynalezione, aby rozwiązać problem "jak zapamiętać informacje o użytkowniku".
- Kiedy użytkownik odwiedza stronę, jego nazwa może być przechowywana w cookie.
- Kiedy użytkownik odwiedza tę stronę ponownie, cookie "pamięta" jego nazwę.
Cookie są przechowywane w parach nazwa-wartość, np.:
username = Bill Gates
Kiedy przeglądarka prosi serwer o stronę, cookie przypisane do tej strony są dodawane do żądania. W ten sposób serwer uzyskuje niezbędne dane, aby "pamiętać" informacje o użytkowniku.
Jeśli przeglądarka nie obsługuje lokalnych cookie, poniższe przykłady nie będą działać.
Tworzenie cookie za pomocą JavaScript
JavaScript może być używany do document.cookie Tworzenie, odczytywanie i usuwanie cookie.
Można utworzyć cookie za pomocą JavaScript:
document.cookie = "username=Bill Gates";
Możesz również dodać datę ważności (czas UTC). Domyślnie, cookie są usuwane po zamknięciu przeglądarki:
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
Przez ścieżka Parametry, możesz powiedzieć przeglądarce, do której ścieżki należy cookie. Domyślnie, cookie należy do bieżącej strony.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Odczytanie pliku cookie za pomocą JavaScript
Możesz przeczytać plik cookie za pomocą JavaScript w następujący sposób:
var x = document.cookie;
document.cookie Zwróci wszystkie pliki cookie w jednym ciągu, np.: cookie1=value; cookie2=value; cookie3=value;
Zmiana pliku cookie za pomocą JavaScript
Używając JavaScript, możesz zmienić go tak samo, jak go utworzyłeś:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Stary plik cookie zostanie zastąpiony.
Usuwanie pliku cookie za pomocą JavaScript
Usuwanie pliku cookie jest bardzo proste.
Podczas usuwania pliku cookie nie musisz określać wartości pliku cookie:
Po prostu expires Ustaw parametry na datę z przeszłości:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Powinieneś zdefiniować ścieżkę pliku cookie, aby upewnić się, że usuniesz poprawny plik cookie.
Niektóre przeglądarki nie pozwolą Ci usunąć pliku cookie, jeśli nie określisz ścieżki.
Ciąg znaków Cookie
document.cookie Atrybut wygląda jak normalny ciąg znaków tekstowych. Ale to nie jest.
Nawet jeśli dodać do document.cookie Napisz pełny ciąg znaków cookie, gdy ponownie go przeczytasz, zobaczysz tylko jego parę nazwa-wartość.
Jeśli ustawiono nowy plik cookie, stary plik cookie nie zostanie zastąpiony. Nowy plik Cookie zostanie dodany do document.cookie, więc jeśli przeczytasz document.cookie, otrzymasz coś takiego:
cookie1 = value; cookie2 = value;
Jeśli chcesz znaleźć wartość określonego cookie, musisz napisać funkcję JavaScript do wyszukiwania wartości cookie w łańcuchu cookie.
Przykład JavaScript Cookie
W poniższym przykładzie utworzymy cookie do przechowywania nazwy odwiedzającego.
Gdy odwiedzający po raz pierwszy dotrze do strony, zostanie poproszony o wypełnienie swojego imienia. Następnie nazwa ta zostanie przechowana w cookie.
Kiedy następnym razem odwiedzający dotrze do tej samej strony, otrzyma powitanie.
Na przykład, utworzymy 3 funkcje JavaScript:
- Funkcja ustawiająca wartość cookie
- Funkcja uzyskująca wartość cookie
- Funkcja sprawdzająca wartość cookie
Funkcja ustawiająca cookie
Najpierw utwórz funkcję, która przechowuje nazwę odwiedzającego w zmiennej cookie:
przykład
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Wyjaśnienie przykładu:
Parametry tej funkcji to: nazwa cookie (cname), wartość cookie (cvalue) oraz liczba dni, przez które cookie wygasa (exdays).
Funkcja ta ustawia cookie, dodając nazwę cookie, wartość cookie i ciąg wygasania.
Funkcja uzyskująca cookie
Następnie, utwórz funkcję zwracającą wartość określonego cookie:
przykład
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var 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:
Użyj cookie jako parametru (cname).
Utwórz zmienną (name) oraz tekst do wyszukiwania (CNAME”=”).
Dekoduj ciąg cookie, przetwarzaj cookie zawierające znaki specjalne, takie jak “$”.
Rozdziel document.cookie na tablicę o nazwie ca (decodedCookie.split(';')) za pomocą średnika.
przejdź przez tablicę ca (i = 0; i < ca.length; i++), a następnie odczytaj każdą wartość c = ca[i].
jeśli znaleziono plik cookie (c.indexOf(name) == 0), zwróci wartość tego pliku cookie (c.substring(name.length, c.length)).
jeśli nie znaleziono pliku cookie, zwróci "".
funkcja sprawdzająca plik cookie
Ostatecznie, tworzymy funkcję sprawdzającą, czy plik cookie został ustawiony.
jeśli plik cookie został ustawiony, zostanie wyświetlona powitanie.
jeśli plik cookie nie został ustawiony, zostanie wyświetlona okno dialogowe z pytaniem o nazwę użytkownika, a nazwa użytkownika zostanie przechowywana jako plik cookie na 365 dni, poprzez wywołanie setCookie funkcja:
przykład
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
}
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
teraz połączone
przykład
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var 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() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
}
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
Powyższy przykład uruchomi funkcję checkCookie() po załadowaniu strony.
- Poprzednia strona Czasowanie JS
- Następna strona Podstawy Web API
