JavaScript evästeet
- Edellinen sivu JS Timing
- Seuraava sivu Web API-esittely
Evästeet mahdollistavat käyttäjän tietojen tallentamisen verkkosivuille.
Mitä evästeitä ovat?
Evästeet ovat pieniä tekstitiedostoja, jotka tallennetaan tietokoneellesi.
Kun web-palvelin lähettää sivun selaimelle, yhteys suljetaan, ja palvelin unohtaa kaikki käyttäjän tiedot.
Evästeitä kehitettiin ratkaistakseen kysymys "miten muistaa käyttäjän tiedot".
- Kun käyttäjä vierailee verkkosivulla, hänen nimensä voidaan tallentaa evästeeseen.
- Kun käyttäjä vierailee sivulla seuraavan kerran, eväste muistaa hänen nimensä.
Evästeet tallennetaan nimiarvo-pareina, kuten:
username = Bill Gates
Kun selain pyytää sivua palvelimelta, evästeet, jotka kuuluvat kyseiselle sivulle, lisätään pyyntöön. Näin palvelin saa tarvittavat tiedot "muistamaan" käyttäjän tiedot.
Jos selain ei tue paikallisia evästeitä, seuraavat esimerkit eivät toimi.
JavaScriptin avulla luodaan evästeitä
JavaScript voi käyttää document.cookie Ominaisuudet luoda, lukea ja poistaa evästeitä.
JavaScriptin avulla voit luoda evästeitä tällä tavalla:
document.cookie = "username=Bill Gates";
Voit myös lisätä voimassa olevan päivämäärän (UTC-aika). Oletuksena, evästeet poistetaan, kun selain suljetaan:
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC"; Käytä path
Voit kertoa selaimelle, mihin polkuun cookie kuuluu. Oletuksena cookie kuuluu nykyiseen sivuun.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Lue cookie JavaScriptilla
Voit lukea cookie:n JavaScriptilla tällä tavalla:
document.cookie var x = document.cookie;
Kaikki cookie:t palautetaan yhdessä merkkijonona, esimerkiksi: cookie1=value; cookie2=value; cookie3=value;
Muuta cookiea JavaScriptilla
Voit muuttaa cookiea samalla tavalla kuin luot sitä JavaScriptilla:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Vanha cookie korvataan.
Poista cookie JavaScriptilla
Cookie:n poistaminen on erittäin yksinkertaista.
Poista cookie ilman arvoa: expires Aseta parametrit menneeseen päivämäärään:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Sinun tulisi määritellä cookie-polku varmistaaksesi oikean cookie:n poistamisen.
Jos et määritä polkua, jotkut selaimet eivät salli sinua poistaa cookiea.
Cookie-merkkijono
document.cookie Ominaisuus näyttää normaalilta tekstimerkkijonolta. Se ei ole.
Vaikka lisäät document.cookie Kirjoita täydellinen cookie-merkkijono, kun luet sen uudelleen, näet vain sen nimi-arvo-parin.
Jos asetetaan uusi cookie, vanha cookie ei korvata sitä. Uusi Cookie lisätään document.cookie:hen, joten jos luet document.cookie, saat jotain tällaista:
cookie1 = value; cookie2 = value;
Jos haluat löytää määritetyn cookie-arvon, sinun on kirjoitettava JavaScript-funktio, joka etsii cookie-merkkijonosta cookie-arvon.
JavaScript Cookie-esimerkki
Alla olevassa esimerkissä luomme cookieen tallentamaan vieraan nimen.
Kun vieraat saapuvat ensimmäistä kertaa sivulle, häneltä vaaditaan nimen antaminen. Tämän jälkeen nimi tallennetaan cookieen.
Kun seuraava vieraat saapuu samaan sivulle, hän saa tervetuliaismessagen.
Esimerkiksi, luomme 3 JavaScript-funktiota:
- Aseta cookie-arvo
- Hae cookie-arvo
- Tarkista cookie-arvon
Cookie-asetus
Ensiksi luomme funktion, joka tallentaa vieraan nimen cookie-muuttujaan:
esimerkki
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=/";
}
Esimerkki selityksestä:
Tämän funktion parametrit ovat: cookie-nimi (cname), cookie-arvo (cvalue) ja tiedetään, kuinka monta päivää cookie vanhenee (exdays).
Lisäämällä cookie-nimen, cookie-arvon ja vanhenemismerkin, funktio asettaa cookie.
Cookie-arvon haku
Sitten luomme funktion, joka palauttaa määritetyn cookie-arvon:
esimerkki
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 "";
}
Funktion selitys:
Lähetä cookie parametrina (cname).
Luo muuttuja (name) ja etsittävä teksti (CNAME”=”).
Decodoi cookie-merkkijonon, käsittele erikoismerkkien sisältäviä cookieja, kuten “$”.
jaetaan document.cookie semikolmilla merkeillä jaetaan nimeltä ca (decodedCookie.split(';')) taulukkoon.
lähestytään ca-taulukkoa (i = 0; i < ca.length; i++) ja luetaan jokainen arvo c = ca[i].
jos eväste löytyy（c.indexOf(name) == 0），palautetaan kyseisen evästeen arvo（c.substring(name.length, c.length)）。
jos eväste ei löydy, palautetaan "".
evästeen tarkistusfunktio
lopuksi luomme funktion, joka tarkistaa onko eväste asetettu.
jos eväste on asetettu, näytetään tervehdys.
jos evästä ei ole asetettu, näytetään ilmoitusikkuna, jossa kysytään käyttäjän nimeä, ja tallennetaan käyttäjänimi evästeeksi 365 päivää, kutsumalla setCookie funktio:
esimerkki
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);
}
}
}
yhdistetään nyt
esimerkki
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);
}
}
}
Yllä oleva esimerkki suorittaa checkCookie()-funktion sivun lataamisen jälkeen.
- Edellinen sivu JS Timing
- Seuraava sivu Web API-esittely
