JavaScript Cookies
- Vorige pagina JS Timing
- Volgende pagina Web API-introductie
Cookies laten u gebruikersinformatie opslaan in webpagina's.
Wat is een cookie?
Cookies zijn gegevens die opgeslagen worden in kleine tekstbestanden op uw computer.
Na het verzenden van een webpagina door de webserver wordt de verbinding gesloten en vergeten de server alles van de gebruiker.
Cookies zijn uitgevonden om het probleem "hoe gebruikersinformatie te onthouden" op te lossen:
- Wanneer de gebruiker een webpagina bezoekt, kan zijn naam worden opgeslagen in een cookie.
- Wanneer de gebruiker de pagina opnieuw bezoekt, zal de cookie zijn naam "onthouden".
Cookies worden opgeslagen in naam-waardeparen, zoals:
username = Bill Gates
Wanneer de browser een webpagina van de server verzoekt, worden de cookies die behoren tot die pagina toegevoegd aan het verzoek. Op deze manier krijgt de server de benodigde gegevens om gebruikersinformatie te "onthouden".
Als de lokale cookie-ondersteuning van de browser is uitgeschakeld, werken de volgende voorbeelden niet.
Met JavaScript cookies maken
JavaScript kan gebruiken document.cookie Eigenschappen om cookies te maken, lezen en verwijderen.
Met JavaScript kunt u op de volgende manier cookies maken:
document.cookie = "username=Bill Gates";
U kunt ook een geldige datum (UTC-tijd) toevoegen.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
Door pad Parameters, je kunt de browser vertellen voor welk pad de cookie hoort. Standaard is de cookie van de huidige pagina.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Met JavaScript cookie's lezen
Met JavaScript, kun je zo cookie's lezen:
var x = document.cookie;
document.cookie Alle cookie's worden in een enkele string geretourneerd, bijvoorbeeld: cookie1=value; cookie2=value; cookie3=value;
Door cookie's met JavaScript te veranderen
Door JavaScript te gebruiken, kun je het veranderen zoals je het hebt aangemaakt:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
De oude cookie wordt overschreven.
Door cookie's met JavaScript te verwijderen
Het verwijderen van een cookie is zeer eenvoudig.
Bij het verwijderen van een cookie hoeft de cookie-waarde niet te worden gespecificeerd:
Direct expires Parameter instellen op een verleden datum is voldoende:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Je moet het pad van de cookie definiëren om ervoor te zorgen dat je de juiste cookie verwijdert.
Als je het pad niet specificeert, laten sommige browsers je niet toe om een cookie te verwijderen.
Cookie-string
document.cookie De eigenschap lijkt op een normale tekststring. Maar dat is niet het geval.
Hoewel je naar document.cookie Schrijf een volledige cookie-strings, wanneer je het opnieuw leest, kun je alleen de naam-waarde-paar zien.
Als een nieuwe cookie is ingesteld, wordt de oude cookie niet overschreven. De nieuwe Cookie wordt toegevoegd aan document.cookie, dus als je document.cookie leest, krijg je iets als dit:
cookie1 = value; cookie2 = value;
If you want to find the value of a specified cookie, you must write a JavaScript function to search for the cookie value in the cookie string.
JavaScript Cookie Example
In the following example, we will create a cookie to store the visitor's name.
When a visitor arrives at the web page for the first time, they will be asked to fill in their name. Then the name is stored in the cookie.
When the next visitor arrives at the same page, they will receive a welcome message.
For example, we will create 3 JavaScript functions:
- Function to set cookie value
- Function to get cookie value
- Function to check cookie value
Function to set cookie
First, we create a function to store the visitor's name in the cookie variable:
voorbeeld
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=/";
}
Example explanation:
The parameters of this function are: the name of the cookie (cname), the value of the cookie (cvalue), and the number of days the cookie is known to expire (exdays).
By adding the cookie name, cookie value, and expiration string together, the function sets the cookie.
Function to get cookie
Then, we create a function that returns the value of a specified cookie:
voorbeeld
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 "";
}
Function explanation:
Pass the cookie as a parameter (cname).
Create a variable (name) and the text to be searched (CNAME”=”).
Decode the cookie string, handle cookies with special characters, such as “$”.
Deze splitst document.cookie met behulp van een puntkomma naar een array genaamd ca (decodedCookie.split(';')).
Loopt door het array ca (i = 0; i < ca.length; i++) en leest elke waarde c = ca[i] uit.
Als de cookie is gevonden (c.indexOf(name) == 0), wordt de waarde van de cookie geretourneerd (c.substring(name.length, c.length)).
Als de cookie niet is gevonden, wordt een lege string geretourneerd.
Functie om cookie te detecteren
Tot slot maken we een functie om te controleren of de cookie is ingesteld.
Als er een cookie is ingesteld, wordt een welkomstbericht weergegeven.
Als er geen cookie is ingesteld, wordt een vraagVenster weergegeven waarin de gebruikersnaam wordt gevraagd, en de gebruikersnaam cookie wordt opgeslagen voor 365 dagen, door setCookie functie:
voorbeeld
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);
}
}
}
Nu samengevoegd
voorbeeld
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(';');
voor(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("Welkom terug " + user);
}
user = prompt("Voer uw naam in:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
De bovenstaande voorbeelden zullen de functie checkCookie() uitvoeren nadat de pagina is geladen.
- Vorige pagina JS Timing
- Volgende pagina Web API-introductie
