JavaScript Cookies

Cookies låter dig lagra användarinformation på webbsidor.

Vad är en cookie?

Cookies är data som lagras i små textfiler på din dator.

När webbservern har skickat en webbsida och anslutningen stängts, glömmer servern all information om användaren.

Cookies är uppfunna för att lösa problemet med hur man minns användarinformation:

  • När användaren besöker en webbsida kan hans namn lagras i en cookie.
  • Nästa gång användaren besöker sidan kommer cookie att "minnas" hans namn.

Cookies lagras i namn-värde-par, t.ex.:

username = Bill Gates

När webbläsaren ber om en webbsida från servern läggs cookies som tillhör sidan till förfrågan. På detta sätt får servern nödvändiga data för att "minnas" användarinformation.

Om din webbläsare inte stöder lokala cookies, kommer följande exempel inte att fungera.

Skapa cookies med JavaScript

JavaScript kan användas för att document.cookie Skapa, läsa och ta bort cookie-egenskaper.

Genom JavaScript kan du skapa cookies på detta sätt:

document.cookie = "username=Bill Gates";

Du kan också lägga till ett giltigt datum (UTC-tid). Som standard tas cookies bort när webbläsaren stängs:

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

Genom path Parametrar, du kan säga till webbläsaren vilken sökväg cookie tillhör. Som standard tillhör cookie den aktuella sidan.

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Läs cookie med JavaScript

Genom JavaScript kan du läsa cookie på detta sätt:

var x = document.cookie;

document.cookie Återkommer alla cookie i en sträng, till exempel: cookie1=value; cookie2=value; cookie3=value;

Ändra cookie med JavaScript

Genom att använda JavaScript kan du ändra cookie på samma sätt som du skapar dem:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Det gamla cookie replaces.

Ta bort cookie med JavaScript

Att ta bort cookie är mycket enkelt.

När du tar bort cookie behöver du inte specificera cookie-värdet:

Lägg till expires Sätt parametern till ett förflutet datum för att göra detta:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Du bör definiera cookie-sökvägen för att säkerställa att rätt cookie tas bort.

Några webbläsare låter inte dig ta bort cookie om du inte specificerar sökvägen.

Cookie-sträng

document.cookie egenskapen ser ut som en vanlig textsträng. Men det är inte så.

Trots att du skriver in document.cookie Skriv en fullständig cookie-sträng, när du läser den igen, ser du bara dess namn-värde-par.

Om ett nytt cookie sätts, kommer det gamla cookie inte att överskrivas. Det nya Cookie kommer att läggas till i document.cookie, så om du läser document.cookie får du något i denna form:

cookie1 = value; cookie2 = value;
　 　 　

Om du vill hitta värdet för en specifik cookie måste du skriva en JavaScript-funktion för att söka i cookie-strängen efter cookie-värdet.

JavaScript Cookie-exempel

I följande exempel skapar vi en cookie för att lagra besökarens namn.

När besökaren besöker webbsidan för första gången kommer han att ombedjas fylla i sitt namn. Därefter lagras detta namn i cookie.

Nästa gång besökaren besöker samma sida kommer han att få ett välkomstmeldande meddelande.

Till exempel kommer vi att skapa 3 JavaScript-funktioner:

  1. Funktionen för att sätta cookie-värdet
  2. Funktionen för att hämta cookie-värdet
  3. Funktionen för att kontrollera cookie-värdet

Funktionen för att sätta cookie

Först skapar vi en funktion som lagrar besökarens namn i cookie-variabeln:

exempel

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

Exempel förklaring:

Parametrarna för den här funktionen är: cookie-namnet (cname), cookie-värdet (cvalue) och antalet dagar innan cookie expirerar (exdays).

Genom att lägga till cookie-namn, cookie-värde och utgångssträngen sätter funktionen cookie.

Funktionen för att hämta cookie

Därefter skapar vi en funktion som returnerar värdet för den specifika cookie:n:

exempel

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

Funktionens förklaring:

Använd cookie som parameter (cname).

Skapa en variabel (name) och den text som ska sökas (CNAME”=”).

Decodera cookie-strängen, behandla cookies med specialtecken, till exempel “$”.

Dela upp document.cookie med semikolon till en array som heter ca (decodedCookie.split(';')).

genomgående ca-array (i = 0; i < ca.length; i++) och läsa ut varje värde c = ca[i].

om cookie hittas (c.indexOf(name) == 0), returneras värdet för den här cookie (c.substring(name.length, c.length)).

om cookie inte hittas, returneras "".

cookiekontrollfunktion

slutligen skapar vi en funktion för att kontrollera om cookie är inställd.

om cookie redan är inställd, kommer ett välkomstmeldande att visas.

om cookie inte är inställd, kommer ett meddelandefönster att visas för att fråga användarens namn och användarnamnet lagras som cookie i 365 dagar genom att anropa setCookie funktion:

exempel

function checkCookie() {
    var username = getCookie("username");
    om (username != "") {
        alert("Välkommen igen " + username);
    }
        username = prompt("Vänligen ange ditt namn:", "");
        om (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

nu kombineras

exempel

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(';');
    för(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);
        }
    }
}

Try it yourself

The example above will run the checkCookie() function after the page is loaded.