Evästeet sisään JavaKäsikirjoitus: Aseta, hae ja poista esimerkki

Mitä ovat evästeet?

Eväste on tietokoneellesi tallennettu tietojoukko, johon selaimesi voi päästä käsiksi. Olet ehkä myös tietoisesti tai tietämättäsi hyötynyt evästeistä. Oletko koskaan pysynyt kirjautuneena sivustolle, kuten Facebookiin, jotta sinun ei tarvitse kirjoittaa tietojasi joka kerta, kun yrität kirjautua sisään? Jos kyllä, käytät evästeitä. Evästeet tallennetaan avain/arvo-pareina.

Tärkeä selvennys: eväste ei säilytä salasanaasi. Se sisältää istuntotunnisteen, joka on satunnainen tunniste, jonka palvelin antaa onnistuneen kirjautumisen jälkeen. Palvelin yhdistää tunnisteen tiliisi, joten salasana itsessään ei koskaan poistu palvelimelta.

Miksi tarvitset evästeen?

Kommunikaatio a Web-selain ja palvelimen välinen tiedonsiirto tapahtuu käyttämällä tilatonta HTTP-protokollaa. Tilaton protokolla käsittelee jokaista pyyntöä erikseen. Palvelin ei siis säilytä tietoja sen lähettämisen jälkeen selaimelle. Mutta monissa tilanteissa tietoja tarvitaan uudelleen. Tässä tulevat kuvaan evästeet. Evästeiden avulla verkkoselaimen ei tarvitse kommunikoida palvelimen kanssa joka kerta, kun tietoja tarvitaan. Sen sijaan ne voidaan hakea suoraan tietokoneelta.

Tyypillisiä käyttötarkoituksia ovat sisäänkirjautuneen istunnon muistaminen, kieli- tai teema-asetuksen tallentaminen,ping kaupassa olevat tuotteetping ostoskori sivujen välillä ja ensikertalaisten ja palaavien kävijöiden laskeminen.

Javascript Aseta eväste

Voit luoda evästeitä document.cookie-ominaisuuden avulla näin.

document.cookie = "cookiename=cookievalue"

Voit jopa lisätä evästeeseesi vanhenemispäivämäärän, jotta kyseinen eväste poistetaan tietokoneelta määritettynä päivänä. Vanhenemispäivämäärä tulee asettaa UTC/GMT-muodossa. Jos et aseta vanhenemispäivämäärää, eväste poistetaan, kun käyttäjä sulkee selaimen.

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

Voit myös määrittää verkkotunnuksen ja polun määrittääksesi, mihin verkkotunnukseen ja mihin hakemistoihin tietyssä verkkotunnuksessa eväste kuuluu. Oletusarvoisesti eväste kuuluu sivulle, joka asettaa evästeen.

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

//luo eväste, joka sisältää nykyisen sivun verkkotunnuksen ja koko verkkotunnuksen kattavan polun.

JavaSkripti Hae eväste

Voit käyttää evästettä näin, mikä palauttaa kaikki nykyiselle verkkotunnukselle tallennetut evästeet.

var x =  document.cookie

Palautettu arvo on yksi merkkijono muodossa name1=value1; name2=value2Yhden evästeen nimen lukemiseen ei ole sisäänrakennettua metodia, joten merkkijono on jaettava osiin. Alla oleva apufunktio palauttaa yhden arvon ja tyhjän merkkijonon, kun nimeä ei ole.

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

lähtö:

Ann Smith
true

JavaScript Poista eväste

Evästeen poistamiseksi sinun tarvitsee vain asettaa evästeen arvoksi tyhjä ja asettaa vanhenee-kohdan arvoksi jo mennyt päivämäärä.

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

Yksi yksityiskohta aiheuttaa useimmat epäonnistuneet poistot. Selain tunnistaa evästeen sen nimen, polun ja verkkotunnuksen perusteella, joten poistolausekkeen on toistettava sama polku ja verkkotunnus, joita käytettiin evästeen luomisen yhteydessä.

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

Evästeiden ominaisuuksien selitys

Jokainen puolipisteen jälkeinen attribuutti muuttaa evästeen säilymisaikaa, sitä kuljettavia pyyntöjä ja sitä lukevia koodeja. Alla oleva viite kattaa kaikki nämä.

SameSite ansaitsee erityistä huomiota, koska selaimet käyttävät nyt oletusarvoa. Kolme hyväksyttyä arvoa toimivat seuraavasti.

• tiukka: Evästettä ei koskaan lähetetä, kun pyyntö on peräisin toiselta sivustolta, mikä on turvallisin asetus pankkiasioille.
• Lax: Eväste kulkee päätason navigoinnin, kuten linkin napsauttamisen, mukana, mutta ei sivustojen välisten kuvien tai kehysten mukana. Tämä on nykyaikaisen selaimen oletusasetus.
• Ei mitään: Eväste lähetetään jokaisen sivustojen välisen pyynnön yhteydessä, ja se on yhdistettävä Secure-attribuuttiin, muuten selain hylkää sen.

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

Kokeile tätä esimerkkiä itse

Alla oleva skripti yhdistää kaikki kolme toimintoa. Se luo evästeen, jonka voimassaoloaika mitataan päivinä, lukee sen nimen perusteella ja tervehtii palaavaa kävijää. Erityisohjeet koodin toimimiseksi … Paina suorita-painiketta kahdesti.

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

Odotettu käyttäytyminen:

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 selitys: createCookie-funktio muuntaa päivien määrän millisekunneiksi ja lisää ne nykyiseen aikaan, jolloin saadaan viimeinen voimassaolopäivä. accessCookie-funktio jakaa evästemerkkijonon puolipisteisiin, leikkaa jokaisen fragmentin ja vertaa fragmentin alkua pyydettyyn nimeen. checkCookie-funktio yhdistää nämä kaksi sivun latauksen yhteydessä.

Evästeet vs. localStorage vs. sessionStorage

Evästeet eivät ole ainoa paikka, johon selain voi tallentaa tietoja. Verkkotallennusvaihtoehtoja on kaksi, ja oikein valitsemalla vältetään tarpeettomien tavujen lähettäminen jokaisella pyynnöllä.

Käytännön sääntö on yksinkertainen. Jos palvelin tarvitsee arvon, käytä evästettä. Jos vain sivu tarvitsee sitä, käytä localStorage- tai sessionStorage-arvoja, koska nämä arvot eivät koskaan lisää painoarvoa verkkopyynnölle.

Evästeiden käsittelykoodi on yleensä jaettu useille sivuille, joten tarkista sisäinen ja ulkoinen JavaKäsikirjoitus ennen kuin päätät, mihin se sijoitetaan. Tässä käytetty merkkijonojen jakaminen perustuu JavaSkriptijonot ja JavaSkriptitaulukon menetelmät, ja lisää toimivia skriptejä ilmestyy käytännön JavaSkriptikoodiesimerkkejä.

UKK