Kolačići unutra JavaSkripta: Primjer postavljanja, dobivanja i brisanja

Što su kolačići?

Kolačić je dio podataka koji se pohranjuje na vašem računalu kako bi mu vaš preglednik mogao pristupiti. Možda ste i vi svjesno ili nesvjesno uživali u prednostima kolačića. Jeste li ikada ostali prijavljeni na web-mjestu poput Facebooka kako ne biste morali upisivati ​​svoje podatke svaki put kada se pokušate prijaviti? Ako jeste, onda koristite kolačiće. Kolačići se spremaju kao parovi ključ/vrijednost.

Važno pojašnjenje: kolačić ne sadrži vašu lozinku. Sadrži identifikator sesije, što je slučajni token koji poslužitelj izdaje nakon uspješne prijave. Poslužitelj uspoređuje taj token s vašim računom, tako da sama lozinka nikada ne napušta poslužitelj.

Zašto vam je potreban kolačić?

Komunikacija između a web preglednik i poslužitelj se događa korištenjem protokola bez stanja pod nazivom HTTP. Protokol bez stanja tretira svaki zahtjev neovisno. Dakle, poslužitelj ne čuva podatke nakon što ih pošalje pregledniku. Ali u mnogim situacijama podaci će ponovno biti potrebni. Ovdje na scenu stupaju kolačići. S kolačićima, web preglednik neće morati komunicirati s poslužiteljem svaki put kada su podaci potrebni. Umjesto toga, mogu se izravno dohvatiti s računala.

Tipične upotrebe uključuju pamćenje prijavljene sesije, pohranjivanje postavki jezika ili teme, čuvanjeping artikli u trgoviniping košarica između stranica i brojanje posjetitelja koji prvi put dolaze u odnosu na posjetitelje koji se vraćaju.

Javascript Postavite kolačić

Kolačiće možete stvoriti pomoću svojstva document.cookie ovako.

document.cookie = "cookiename=cookievalue"

Možete čak dodati i datum isteka kolačiću tako da će se određeni kolačić ukloniti s računala na navedeni datum. Datum isteka treba biti postavljen u UTC/GMT formatu. Ako ne postavite datum isteka, kolačić će se ukloniti kada korisnik zatvori preglednik.

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

Također možete postaviti domenu i putanju kako biste odredili kojoj domeni i kojim direktorijima u određenoj domeni kolačić pripada. Prema zadanim postavkama, kolačić pripada stranici koja postavlja kolačić.

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

//kreiraj kolačić s domenom trenutne stranice i putanjom koja pokriva cijelu domenu.

JavaSkripta za dobivanje kolačića

Kolačiću možete pristupiti na ovaj način, koji će vratiti sve kolačiće spremljene za trenutnu domenu.

var x =  document.cookie

Vraćena vrijednost je jedan niz znakova u obliku name1=value1; name2=value2Ne postoji ugrađena metoda za čitanje jednog kolačića po imenu, pa se niz mora razdvojiti. Pomoćnik u nastavku vraća jednu vrijednost i prazan niz kada ime nedostaje.

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") === "");

Izlaz:

Ann Smith
true

JavaSkripta Izbriši kolačić

Za brisanje kolačića, samo trebate postaviti vrijednost kolačića na empty (prazno) i vrijednost expires (iskri) na datum koji je već prošao.

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

Jedan detalj uzrokuje većinu neuspjelih brisanja. Preglednik identificira kolačić po njegovom imenu, zajedno s putanjom i domenom, pa naredba za brisanje mora ponoviti isti put i domenu koji su korišteni prilikom stvaranja kolačića.

// 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";

Objašnjenje atributa kolačića

Svaki atribut nakon prve točke-zareza mijenja koliko dugo kolačić traje, koji ga zahtjevi nose i koji ga kod može čitati. Donja referenca pokriva sve njih.

SameSite zaslužuje posebnu pozornost jer preglednici sada primjenjuju zadanu vrijednost. Tri prihvaćene vrijednosti ponašaju se na sljedeći način.

• Strogo: Kolačić se nikada ne šalje kada zahtjev potječe s druge stranice, što je najsigurnije okruženje za bankarske sesije.
• Laks: Kolačić putuje s navigacijom najviše razine, kao što je klik na poveznicu, ali ne s slikama ili okvirima s više web-mjesta. Ovo je zadana postavka modernog preglednika.
• Ništa: Kolačić se šalje na svaki zahtjev s više web-mjesta i mora biti uparen s atributom Secure, inače ga preglednik odbija.

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

Isprobajte ovaj primjer sami

Skripta u nastavku kombinira sve tri operacije. Stvara kolačić s rokom trajanja izmjerenim u danima, čita ga po imenu i pozdravlja ponovnog posjetitelja. Posebne upute za rad koda ... Pritisnite gumb za pokretanje dva puta.

<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>

Očekivano ponašanje:

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 obrazloženje: Funkcija createCookie pretvara broj dana u milisekunde i dodaje ih trenutnom vremenu, što daje datum isteka. Funkcija accessCookie dijeli niz kolačića na točke-zareze, skraćuje svaki fragment i uspoređuje početak fragmenta s traženim nazivom. Funkcija checkCookie povezuje to dvoje prilikom učitavanja stranice.

Kolačići vs. lokalna pohrana vs. pohrana sesije

Kolačići nisu jedino mjesto gdje preglednik može pohranjivati ​​podatke. Postoje dvije opcije web pohrane, a pravilnim odabirom izbjegava se slanje nepotrebnih bajtova na svaki zahtjev.

Praktično pravilo je jednostavno. Ako poslužitelj treba vrijednost, koristite kolačić. Ako je potrebna samo stranici, koristite localStorage ili sessionStorage, jer te vrijednosti nikada ne dodaju težinu mrežnom zahtjevu.

Kôd za obradu kolačića obično se dijeli na više stranica, stoga ga pregledajte unutarnje i vanjsko JavaScript prije nego što odlučite gdje ga smjestiti. Razdvajanje nizova koje se ovdje koristi temelji se na JavaNizovi skripte i JavaMetode niza skripti, a daljnji radni skripti pojavljuju se u praktičan JavaPrimjeri skriptnog koda.

Pitanja i odgovori